<template>
	<view class="container">
		<template v-if="!articleDetail.error">
			<scroll-view class="scroll-Y" :style="scrollHeight"
				:class="{'free': articleDetail.enablePay != 1 || endPay}" :refresher-enabled="true"
				refresher-default-style="none" :scroll-y="scrolly" :refresher-triggered="refreshing"
				refresher-background="rgba(255, 255, 255, 0)" @refresherrefresh="refresh" @scroll="scroll">
				<view class="head"
					:class="{'other': articleDetail.expertInfo && articleDetail.expertInfo.userIdentity > 1}">
					<uni-nav-bar class="ch-nav" height="88rpx" :backgroundColor="navBgColor" leftWidth="90rpx"
						rightWidth="90rpx" color="#fff" :fixed="true" :padding="false" :border="navBorder"
						@clickLeft="goBack(1)">
						<template slot="left">
							<image class="left"
								:src="!isBlack ? require('@/public/images/public/dhl_fhb.png') : require('@/public/images/public/dhl_fhjt.png')"
								mode="aspectFit"></image>
						</template>
						<text class="title" :class="{'color-black': isBlack}">方案详情</text>
						<template slot="right"></template>
					</uni-nav-bar>
					<view class="post-des flex-c"
						:class="{'zs-icon' : articleDetail.label == '1', 'fl-icon' : articleDetail.label == '2'}">
						<view class="post-des-head flex-r ac" v-if="articleDetail.expertInfo"
							@tap="$CHS.goExpertHome(articleDetail.expertInfo.expertId, articleDetail.userType)">
							<view class="author-image border-round">
								<lazy-image class="inheritwh border-round"
									:src="articleDetail.expertInfo.expertAvatar+'?imageView2/1/w/100/h/100/q/50'"
									:type="articleDetail.userType" fit="cover"></lazy-image>
								<view class="">
									<image class="see-more" src="@/public/images/article/dj.png" mode=""></image>
								</view>
								<!-- <view class="expert-note" v-if="articleDetail.expertInfo.saleArticleNum"
									:class="{'round': articleDetail.expertInfo.saleArticleNum < 10}">
									<text>{{articleDetail.expertInfo.saleArticleNum}}</text>
								</view> -->
							</view>
							<view class="author-info flex-c">
								<view class="info-top-name flex-r ac">
									<text class="text-secondary">{{articleDetail.expertInfo.expertName}}</text>
									<image v-if="articleDetail.expertInfo.cardFlag == 1"
										src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
								</view>
								<view class="info-detail text-info color-grey text-hidden"
									v-if="articleDetail.expertInfo.remark">
									{{articleDetail.expertInfo.remark}}
								</view>
							</view>
							<view class="author-fav flex-r ac" v-if="articleDetail.userType == 'expert'">
								<button class="card-btn"
									@tap.stop="$goByName('expertcards', {eid: articleDetail.expertInfo.expertId, random: Date.now()})"
									v-if="expertCard">
									{{expertCard.cardFlag == 1 ? (expertCard.cardType == 1 ? '续费优享卡' : '已订购') : '订购优享卡'}}
								</button>
								<button class="favbtn active-msg"
									:class="{'nochat': articleDetail.expertInfo.userIdentity != 1}" type="warn"
									size="mini" v-if="articleDetail.expertInfo.followStatus == 1"
									@tap.stop="goChat(articleDetail.expertInfo)">私信</button>
								<button class="favbtn active-fav" type="warn" size="mini"
									@tap.stop="favExpert(articleDetail.expertInfo)" v-else>关注</button>
							</view>
						</view>
						<view class="post-des-body flex-c" v-if="articleDetail.expertInfo">
							<view class="body-tag flex-w"
								v-if="articleDetail.expertInfo.expertTag || articleDetail.expertInfo.hitResultTxt || articleDetail.expertInfo.hotContineTxt">
								<text class="tag-blue mt10"
									v-if="articleDetail.expertInfo.expertTag">{{articleDetail.expertInfo.expertTag}}</text>
								<text class="tag-red mt10"
									v-if="articleDetail.expertInfo.hotContineTxt">{{articleDetail.expertInfo.hotContineTxt}}</text>
								<text class="tag-gold mt10"
									v-else-if="articleDetail.expertInfo.hitResultTxt">{{articleDetail.expertInfo.hitResultTxt}}</text>
								<text class="tag-season mt10" :class="'rank'+articleDetail.rankTag"
									v-if="articleDetail.seasonRankTag">{{articleDetail.seasonRankTag}}</text>
								<text class="tag-matchRed mt10"
									v-if="articleDetail.seasonHotContineTxt">{{articleDetail.seasonHotContineTxt}}</text>
								<text class="tag-matchRed mt10"
									v-else-if="articleDetail.seasonHitResultTxt">{{articleDetail.seasonHitResultTxt}}</text>
							</view>
						</view>
						<!-- <view class="body-result flex-r"
							v-if="articleDetail.expertInfo.hitResultTxt || articleDetail.expertInfo.hotContineTxt">
							<view class="author-result-detail flex-c"
								:class="{'max': Number(articleDetail.expertInfo.hitRate) >= 60}">
								<template
									v-if="articleDetail.expertInfo.standingsList && articleDetail.expertInfo.standingsList[0]">
									<view class="detail-text">
										<text>近期成绩</text>
									</view>
									<view class="detail-ball flex-r">
										<view class="detail-ball-list flex-r">
											<template
												v-for="(item, index) in articleDetail.expertInfo.standingsList">
												<image :key="index" class="ball"
													v-if="item.result == 2 && articleDetail.expertInfo.standingsList[index-1] && articleDetail.expertInfo.standingsList[index-1].result == 2"
													:src="require('@/public/images/article/exp_'+item.result+'_1.png')"
													mode="aspectFit"></image>
												<image :key="index" class="ball" v-else
													:src="require('@/public/images/article/exp_'+item.result+(item.result == 1 && item.matchSize ? '_'+item.matchSize : '')+'.png')"
													mode="aspectFit"></image>
											</template>
										</view>
									</view>
								</template>
							</view>
							<view class="author-result-score flex-c"
								v-if="Number(articleDetail.expertInfo.hitRate) >= 60">
								<view class="result-score flex-r">
									<text>{{articleDetail.expertInfo.hitRate}}</text>
									<text>%</text>
								</view>
								<text class="result-des color-red">{{articleDetail.expertInfo.hitRateName}}</text>
							</view>
						</view> -->
					</view>
				</view>
				<view class="body" :class="{'isdown': downShow}">
					<view class="post-des card flex-c"
						:class="{'zs-icon' : articleDetail.label == '1', 'fl-icon' : articleDetail.label == '2'}">
						<view class="post-des-title  ">
							<view class="artitlce-title">
								<view v-if="articleDetail.articleType===2"></view>
								<image v-if="articleDetail.label==='1'" class="spfa"
									src="@/public/images/article/yxkmd.png" mode=""></image>
								<image v-else-if="articleDetail.label==='2'" class="spfa"
									src="@/public/images/article/flfa.png" mode=""></image>
								<image class="spfa" v-if="articleDetail.articleType=='2'"
									src="@/public/images/index/spfa.png"></image>
								<text class="title-name">
									{{articleDetail.title}}
								</text>
							</view>
							<view class="text-info color-grey flex-r ac jsb">
								<view class="date" v-if="articleDetail.displayTime">
									<uni-dateformat :date="articleDetail.displayTime" :threshold="[60000, 12*3600000]"
										format="MM-dd hh:mm"></uni-dateformat>
									{{new Date() - new Date(articleDetail.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
								</view>
								<text class="views">{{articleDetail.virtualReadNum || 0}}人查看</text>
							</view>
						</view>
						<!-- <view class="post-des-foot flex-r" v-if="articleDetail.state == 1 && !relationId">
							<text class="text-mini">本方案您享有不中返还特权，若赛果与推荐不符，彩虹豆自动退还</text>
						</view>
						<view class="post-des-result" v-if="articleDetail.matchInfoList && articleDetail.result">
							<image
								:src="require('@/public/images/article/res_'+articleDetail.result+(articleDetail.result == 1 ? '_'+articleDetail.matchInfoList.length : '')+'.png')"
								mode="aspectFit"></image>
						</view> -->
					</view>
					<!-- <template v-for="(match, index) in articleDetail.matchInfoList">
						<view class="post-event card flex-c" v-if="match.matchId" :key="index">
							<view class="event-body flex-c">
								<view class="event-body-des flex-r ac">
									<view class="des-typebtn flex-r ac" v-if="match.lotteryType">
										<text
											class="text-mini color-blue">{{match.lotteryType == 201 ? '竞篮' : (match.lotteryType == 301 ? '北单' : '竞足')}}</text>
									</view>
									<view class="des-date text-mini color-grey" @tap="$CHS.goMatchDetail(match)">
										<text>{{match.competitionName}}</text>
										<text class="fenge">|</text>
										<uni-dateformat class="date" :date="match.matchTime"
											format="yyyy.MM.dd hh:mm"></uni-dateformat>
										<template
											v-if="match.issueNum && (match.lotteryType == 101 || match.lotteryType == 201)">
											<text class="fenge">|</text>
											<text>{{weekDay(match.issueNum.substring(0,1))}}</text>
										</template>
										<template v-if="match.issueNum && match.lotteryType">
											<text class="fenge">|</text>
											<text v-if="match.lotteryType == 301">{{match.issueNum}}</text>
											<text
												v-if="match.lotteryType == 101 || match.lotteryType == 201">{{match.issueNum.substring(1,4)}}</text>
										</template>
									</view>
									<template v-if="match.statusId == 1">
										<view class="des-favbtn text-info"
											v-if="!match.followStatus || (match.followStatus == 2 && isFollow[match.sportId-1].indexOf(match.matchId)==-1)"
											@tap="seletRemindTime(index)">
											<text class="color-blue">收藏比赛</text>
										</view>
										<view class="des-favbtn text-info" v-else>
											<text class="color-grey">已收藏</text>
										</view>
									</template>
								</view>
								<view class="event-body-status text-info color-grey">
									<text :class="{'color-blue': match.statusId > 1 && match.statusId < 8}"
										v-if="match.sportId == 1">{{$CHS.getMatchFootStatus(match.statusId)}}</text>
									<text :class="{'color-blue': match.statusId > 1 && match.statusId < 10}"
										v-else>{{$CHS.getMatchBasketStatus(match.statusId)}}</text>
								</view>
								<view class="event-body-event flex-r" @tap="$CHS.goMatchDetail(match)">
									<view class="event-left flex-r">
										<view class="event-info">
											<text>{{match.sportId == 1 ? '[主]' : '[客]'}}</text>
										</view>
										<view class="event-team left flex-r">
											<text
												class="team-name">{{match.sportId == 1 ? match.homeNameZh : match.awayNameZh}}</text>
											<image :src="match.homeLogo || require('@/public/images/public/zqdu.png')"
												mode="aspectFit" v-if="match.sportId == 1"></image>
											<image :src="match.awayLogo || require('@/public/images/public/lqdh.png')"
												mode="aspectFit" v-else></image>
										</view>
									</view>
									<view class="event-score" v-if="match.sportId == 1">
										<text v-if="match.statusId > 1 && match.statusId < 9">
											{{$CHS.sumScoreFoot(match.homeScores)+':'+$CHS.sumScoreFoot(match.awayScores)}}
										</text>
										<text v-else>
											VS
										</text>
									</view>
									<view class="event-score" v-else>
										<text v-if="match.statusId > 1 && match.statusId < 11">
											{{$CHS.sumScoreBasket(match.awayScores)+'-'+$CHS.sumScoreBasket(match.homeScores)}}
										</text>
										<text v-else>
											VS
										</text>
									</view>
									<view class="event-right flex-r">
										<view class="event-team right flex-r">
											<image :src="match.awayLogo || require('@/public/images/public/zqdu.png')"
												mode="aspectFit" v-if="match.sportId == 1"></image>
											<image :src="match.homeLogo || require('@/public/images/public/lqdh.png')"
												mode="aspectFit" v-else></image>
											<text
												class="team-name">{{match.sportId == 1 ? match.awayNameZh : match.homeNameZh}}</text>
										</view>
										<view class="event-info">
											<text>{{match.sportId == 1 ? '[客]' : '[主]'}}</text>
										</view>
									</view>
								</view>
							</view>
							<template v-if="scores[index]">
								<view class="event-wanfa" v-if="scores[index].spf || scores[index].rqspf">
									<WanFa v-if="scores[index].spf" type="spf" :scores="scores[index].spf" />
									<WanFa v-if="scores[index].rqspf" type="rqspf" :scores="scores[index].rqspf" />
								</view>
								<view class="event-wanfa" v-if="scores[index].rqsf">
									<WanFa type="rqsf" :scores="scores[index].rqsf" />
								</view>
								<view class="event-wanfa" v-if="scores[index].jq">
									<WanFa type="jq" :scores="scores[index].jq" />
								</view>
								<view class="event-wanfa" v-if="scores[index].dxq">
									<WanFa type="dxq" :scores="scores[index].dxq" />
								</view>
								<view class="event-wanfa" v-if="scores[index].rfsf">
									<WanFa type="rfsf" :scores="scores[index].rfsf" />
								</view>
								<view class="event-wanfa" v-if="scores[index].dxf">
									<WanFa type="dxf" :scores="scores[index].dxf" />
								</view>
							</template>
						</view>
					</template> -->
					<template>
						<view class="post-detail card">
							<view class="post-detail-head flex-r">
								<text class="text-large text-bold">比赛信息</text>
							</view>
							<view class="match flex-r ac jsb" v-for="(match, index) in articleDetail.matchInfoList"
								:key="index">
								<view class="match-num">
									第{{index + 1}}场
								</view>
								<view class="match-info">
									<text class="z-k">[主]</text>{{match.homeNameZh}}<text
										class="match-vs">VS</text>{{match.awayNameZh}}<text class="z-k">[客]</text>
								</view>
							</view>
						</view>
					</template>
					<view class="post-detail card water-mark"
						v-if="(articleDetail.enablePay == 1 || articleDetail.freeVideoUrl) && articleDetail.freeContent">
						<view class="post-detail-head flex-r">
							<text class="text-large text-bold">比赛前言</text>
						</view>
						<view class="post-detail-body">
							<view class="item-body-text">
								<view v-if="articleDetail.freeContent&&articleDetail.freeContent.includes('<')" class="html-content" ref="freeContent" v-html="articleDetail.freeContent"></view>
								<view class="text-con" v-else-if="articleDetail.freeContent" style="width: 670rpx; white-space: pre-wrap; font-size: 30rpx;line-break: anywhere;" v-text="articleDetail.freeContent"></view>
								<template v-if="articleDetail.freeImageUrl">
									<view class="article-image flex-r"  
										:class="{'big-image': articleDetail.freeImageUrl.split(',').length == 1}">
										<lazy-image ref="freeContent"
											:src="articleDetail.freeImageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'"
											fit="cover"
											v-if="articleDetail.freeImageUrl.split(',').length == 1"></lazy-image>
										<template v-else>
											<!-- <lazy-image v-for="(img, index) in articleDetail.freeImageUrl.split(',')"
												:src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index"
												fit="cover"></lazy-image> -->
												<image @click="getAdd(img,articleDetail.freeImageUrl)" v-for="(img, index) in articleDetail.freeImageUrl.split(',')"
												:src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index"
												fit="cover"></image>
										</template>
									</view>
								</template>
							</view>
						</view>
					</view>
					<view class="post-detail cardpay"
						:class="{'water-mark':  (articleDetail.pay || articleDetail.finish == 1 || articleDetail.enablePay != 1)}">
						<view class="post-detail-head flex-r">
							<text class="text-large text-bold">专家分析</text>
							<text
								class="text-small color-grey">（{{articleDetail.articleType == 1 ? '图文讲解' : '视频讲解'}}）</text>
						</view>
						<template v-if="articleDetail.enablePay == 1">
							<view class="post-detail-body" v-if="articleDetail.pay">
								<view class="item-body-video"
									v-if="articleDetail.articleType == 2 && articleDetail.videoUrl"
									@tap="videoPlay(articleDetail.videoUrl)">
									<FullVideo :url="articleDetail.videoUrl" :article="true" width="670rpx"
										height="376rpx"></FullVideo>
								</view>
								<!-- <view class="item-body-text" v-if="articleDetail.articleType == 1 && articleDetail.content">
								<view class="html-content" ref="content" v-html="articleDetail.content" ></view>
								</view> -->
								<view class="item-body-text articleDetail_content" v-if="articleDetail.content">
									<view class="html-content" ref="content" v-if="articleDetail.content.includes('<')" v-html="articleDetail.content"></view>
									<view  v-else style="white-space: pre-wrap; font-size: 30rpx;line-break: anywhere;" v-text="articleDetail.content">
									</view>
									<template v-if="articleDetail.imageUrl">
										<view class="article-image flex-r"
											:class="{ 'big-image': articleDetail.imageUrl.split(',').length == 1}">
											<lazy-image
												ref="content"
												:src="articleDetail.imageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'"
												fit="cover"
												v-if="articleDetail.imageUrl.split(',').length == 1"></lazy-image>
											<template v-else>
												<!-- <lazy-image v-for="(img, index) in articleDetail.imageUrl.split(',')"
													:src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index"
													fit="cover"></lazy-image> -->
												<image @click="getAdd(img,articleDetail.imageUrl)" v-for="(img, index) in articleDetail.imageUrl.split(',')"
												:src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index"
												fit="cover"></image>
											</template>
										</view>
									</template>
								</view>
							</view>
							<template v-else>
								<view class="post-detail-body" v-if="articleDetail.articleType == 2 && !endPay">
									<view class="item-body-video" @tap="videoPlay('url')" v-if="articleDetail.Pay">
										<FullVideo :poster="require('@/public/images/public/t1-ys.jpg')" :article="true"
											:lock="true" width="670rpx" height="376rpx"
											v-if="articleDetail.sportId == 1"></FullVideo>
										<FullVideo :poster="require('@/public/images/public/lqt-ys.jpg')"
											:article="true" :lock="true" width="670rpx" height="376rpx" v-else>
										</FullVideo>
									</view>
								</view>
								<view class="post-detail-lock flex-c ac "
									:class="{'post-detail-lock-h':!articleDetail.Pay&&articleDetail.articleType == 2, 'foot-bg':!articleDetail.Pay&&articleDetail.sportId == 1&&articleDetail.articleType == 2,'basket-bg':!articleDetail.Pay&&articleDetail.sportId == 2&&articleDetail.articleType == 2}">
									<view class="lock-time flex-c ac">
										<text class="text-secondary color-grey"
											:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}"
											v-if="!endPay">距售卖截止</text>
										<text class="text-secondary color-black"
											:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}"
											v-else>售卖已截止，文章无法购买</text>
										<view class="time mt20 flex-r ac" v-if="countDown && !endPay"
											:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}">
											<text class="num"
												:class="{'lock-time-time':!articleDetail.Pay&&articleDetail.articleType == 2}">{{countDown[0] || '00'}}</text>
											<text class="char"
												:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}">:</text>
											<text class="num"
												:class="{'lock-time-time':!articleDetail.Pay&&articleDetail.articleType == 2}">{{countDown[1] || '00'}}</text>
											<text class="char"
												:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}">:</text>
											<text class="num"
												:class="{'lock-time-time':!articleDetail.Pay&&articleDetail.articleType == 2}">{{countDown[2] || '00'}}</text>
										</view>
										<view class="time mt20 flex-r ac" v-else>
											<text class="num"
												:class="{'lock-time-time':!articleDetail.Pay&&articleDetail.articleType == 2}">00</text>
											<text class="char"
												:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}">:</text>
											<text class="num"
												:class="{'lock-time-time':!articleDetail.Pay&&articleDetail.articleType == 2}">00</text>
											<text class="char"
												:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}">:</text>
											<text class="num"
												:class="{'lock-time-time':!articleDetail.Pay&&articleDetail.articleType == 2}">00</text>
										</view>
									</view>
									<view class="lock-des mt20"
										:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}"
										v-if="!endPay">
										<text class="text-regular"
											:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}">付费后可查看详细分析</text>
									</view>
									<view class="lock-info mt20"
										:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}"
										v-if="!endPay">
										<text class="text-info"
											:class="{'lock-time-color':!articleDetail.Pay&&articleDetail.articleType == 2}">购买后查看专业分析，购彩请至线下</text>
									</view>
								</view>
							</template>
						</template>
						<view class="post-detail-body" v-else>
							<view class="item-body-video"
								v-if="articleDetail.articleType == 2 && articleDetail.freeVideoUrl"
								@tap="videoPlay(articleDetail.freeVideoUrl)">
								<FullVideo :url="articleDetail.freeVideoUrl" :article="true" width="670rpx"
									height="376rpx"></FullVideo>
							</view>
							<view class="item-body-text"
								v-if="articleDetail.articleType == 1 && articleDetail.freeContent">
								<!-- <view class="html-content" ref="freeContent" v-html="articleDetail.freeContent"></view> -->
								<view v-if="articleDetail.freeContent&&articleDetail.freeContent.includes('<')" class="html-content" ref="freeContent" v-html="articleDetail.freeContent"></view>
								<view  v-else-if="articleDetail.freeContent" style="white-space: pre-wrap; font-size: 30rpx;line-break: anywhere;" v-text="articleDetail.freeContent"></view>
								<template v-if="articleDetail.freeImageUrl">
									<view class="article-image flex-r"
										:class="{'big-image': articleDetail.freeImageUrl.split(',').length == 1}">
										<lazy-image
											ref="freeContent"
											:src="articleDetail.freeImageUrl.split(',')[0]+'?imageView2/1/w/710/h/400/q/50'"
											fit="cover"
											v-if="articleDetail.freeImageUrl.split(',').length == 1"></lazy-image>
										<template v-else>
											<!-- <lazy-image v-for="(img, index) in articleDetail.freeImageUrl.split(',')"
												:src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index"
												fit="cover"></lazy-image> -->
											<image @click="getAdd(img,articleDetail.freeImageUrl)" v-for="(img, index) in articleDetail.freeImageUrl.split(',')"
											:src="img+'?imageView2/1/w/226/h/170/q/50'" :key="index"
											fit="cover"></image>
										</template>
									</view>
								</template>
							</view>
						</view>
					</view>

					<view class="post-details cards">
						<view class="lock-info mt39 flex-r ac jc">
							<image class="lock-info-img left" src="@/public/images/expert/x2.png" mode="aspectFill">
							</image>
							<text class="text-info">以上内容仅代表发布者个人意见，仅供浏览参考</text>
							<image class="lock-info-img right" src="@/public/images/expert/x2.png" mode="aspectFill">
							</image>
						</view>
						<view class="post-detail-support flex-c ac " v-if="articleDetail.likeInfo">
							<image class="support-icon"
								:src="require('@/public/images/bar/dz_'+(articleDetail.likeInfo.likeStatus ? 'yd' : 'wd')+'.png')"
								mode="widthFix" @tap="supportSubmit(articleDetail.likeInfo.likeStatus)"></image>
							<view class="support-info mt20 text-small flex-r ac jc">
								<view class="support-user flex-r ac"
									:style="'width: '+[(articleDetail.likeInfo.avatarList.length - 1)*40 + 64]+'rpx;'"
									v-if="articleDetail.likeInfo.avatarList[0]">
									<lazy-image v-for="(avatar, index) in articleDetail.likeInfo.avatarList.slice(0, 5)"
										:key="index" class="user-avatar border-round"
										:style="'z-index: '+(5-index)+';left:'+(index*40)+'rpx;'" :src="avatar"
										type="user" fit="cover"></lazy-image>
								</view>
								<text class="color-grey">{{articleDetail.likeInfo.likeCount || 0}}人已点赞</text>
							</view>
						</view>
						<view class="post-detail-notice thinborder-top"
							v-if="articleDetail.expertInfo && articleDetail.expertInfo.userIdentity ==1">
							<!-- 接收消息通知 -->
							<view class="flex-r ac" v-if="articleDetail.expertInfo.wxNumber&&articleDetail.pay">
								<view class="author-image border-round">
									<lazy-image class="inheritwh border-round"
										:src="articleDetail.expertInfo.expertAvatar+'?imageView2/1/w/100/h/100/q/50'"
										:type="articleDetail.userType" fit="cover"></lazy-image>
								</view>
								<view class="notice-img" @tap="getWxNumbe(articleDetail.expertInfo.wxNumber)">
									<text class="notice-expertInfo">我的微信帐号：<text
											class="notice-expertInfoName">“{{articleDetail.expertInfo.wxNumber}}”</text>，欢迎添加好友哦~</text>
								</view>
							</view>
							<view class="flex-r ac">
								<view class="author-image border-round">
									<lazy-image class="inheritwh border-round"
										:src="articleDetail.expertInfo.expertAvatar+'?imageView2/1/w/100/h/100/q/50'"
										:type="articleDetail.userType" fit="cover"></lazy-image>
								</view>
								<view class="notice-img">
									<text v-if="articleDetail.expertInfo.subscribeName"
										class="notice-expertInfo">关注<text
											class="notice-expertInfoName">“{{articleDetail.expertInfo.subscribeName}}”</text>，就能第一时间收到我的最新推送哦~</text>
									<text v-else class="notice-expertInfo">联系专家，了解最新比赛信息<text
											class="notice-expertInfoNames">联系专家，了解最新比赛信息</text></text>
								</view>
							</view>
							<view class="notice-message flex-r ac">
								<view class="message-notice" :class="{'action':!articleDetail.expertInfo.subscribeUrl}" @tap="articleDetail.expertInfo.subscribeUrl?showPopup=true:showPopup=false">
									接收消息通知
								</view>
								<view class="contact-expertInfo" @tap="goChatBox(articleDetail.expertInfo.expertId)">
									联系专家
								</view>
							</view>
						</view>
					</view>
					<view class="post-other"
						v-if="articleDetail.result && articleDetail.supplyList && articleDetail.supplyList[0]">
						<view class="post-other-head flex-r">
							<view class="head-left">
								<text>补单</text>
							</view>
						</view>
						<view class="post-other-hot flex-c">
							<ArticleList :list="articleDetail.supplyList" type="supply" :relationId="articleId"
								:showHead="false" :ShowSP="false"></ArticleList>
						</view>
					</view>
					<view class="post-other"
						v-else-if="articleDetail.result && articleDetail.additionalContent && articleDetail.additionalContent[0]">
						<view class="post-other-head flex-r">
							<view class="head-left">
								<text>补单</text>
							</view>
						</view>
						<view class="post-other-hot addcontent flex-c"
							@tap="$goByName('addcontentdetail', {aid: articleDetail.additionalContent[0].articleId})">
							<view class="addcontent-detail">{{articleDetail.additionalContent[0].content}}</view>
							<view class="addcontent-info flex-r ac jsb text-info">
								<uni-dateformat class="date" :date="articleDetail.additionalContent[0].createTime"
									format="yyyy.MM.dd hh:mm"></uni-dateformat>
								<text class="color-blue">查看详情</text>
							</view>
						</view>
					</view>
					<!-- <view class="post-other"
						v-if="articleDetail.state=='1' && articleDetail.enablePay==1 && articleDetail.pay &&articleDetail.finish==1 &&articleDetail.result==2">
						<view class="post-other-head flex-r ">
							<view class="head-left">
								<text>不中返还</text>
							</view>
						</view>
						<view class="post-other-hot flex-c refund" v-if="articleDetail.backFlag==1">
							<view class="Refund_for_failure">
								<text class="refund_left">返还状态</text>
								<text class="refund_right">已返还</text>
							</view>
							<view class="Refund_for_failure">
								<text class="refund_left">返还时间</text>
								<text class="refund_right">{{articleDetail.finishTime}}</text>
							</view>
							<view class="Refund_for_failure">
								<text class="refund_left">返还方式</text>
								<text class="refund_right">已返还至账户余额</text>
							</view>
						</view>
						<view class="post-other-hot flex-c refund" v-else>
							<view class="Refund_for_failure">
								<text class="refund_left">返还状态</text>
								<text class="refund_right refund_right_text">返还中...</text>
							</view>
							<view class="Refund_for_failure">
								<text class="refund_left">返还时间</text>
								<text class="refund_right ">--</text>
							</view>
							<view class="Refund_for_failure">
								<text class="refund_left">返还方式</text>
								<text class="refund_right">--</text>
							</view>
						</view>
					</view> -->
					<!-- <view class="post-other" v-if="expertShare">
						<view class="post-other-head flex-r">
							<view class="head-left">
								<text>专家晒单</text>
							</view>
						</view>
						<view class="post-other-hot flex-c">
							<ContentList :list="expertShare" :showHead="false" :showFoot="true" :showBar="false"
								:marginTop="true" :radius="true" type="recommend"></ContentList>
						</view>
					</view> -->
					<!-- <view class="post-other" v-if="articleDetail.articleList">
						<view class="post-other-head flex-r">
							<view class="head-left"> -->
					<!-- <text>{{articleDetail.pay || articleDetail.enablePay != 1 || articleDetail.finish == 1?'专家其他方案推荐':'方案推荐'}}</text> -->
					<!-- 			<text>专家其他方案推荐</text>
							</view>
						</view>
						<view class="post-other-hot flex-c">
							<ArticleList :list="articleDetail.articleList" :showHead="false" :showBar="false"
								:showSP="false"></ArticleList>
						</view>
					</view> -->
					<view class="post-comment" v-if="articleDetail.id">
						<CommentList :type="articleDetail.userType == 'user' ? 99 : 1" :msgId="articleDetail.id"
							:barId="barInfo && barInfo.barId" :refresh="refreshing" :padding="false" :radius="true"
							@more="showCommentPopup = true"></CommentList>
					</view>
					<!-- <view class="post-notice flex-c" v-if="!endPay">
						<text class="title">温馨提示</text>
						<view class="content">
							<text>消费过程中遇到问题，请及时联系微信公众号：彩虹有料。</text>
						</view>
						<view class="content color-grey">
							彩虹体育
							<text class="color-blue">非购彩平台</text>，彩虹豆
							<text class="color-blue">只用于购买专家方案，不支持提现等操作</text>
							。本文所包含的任何评论、预测等观点均为个人观点，不代表彩虹体育的意见。上述观点仅供参考、不得理解为彩虹体育对相关比赛结果的承诺。
						</view>
					</view> -->
				</view>
			</scroll-view>
			<view class="foot" :class="{'full-screen': isPay}" :style="windowHeight">
				<view class="post-foot flex-c" v-if="!isPay">
					<view class="post-foot-toast flex-r ac jc">
						<text class="text-mini color-blue">观点仅供参考，投注需谨慎，请前往正规渠道购彩，本平台不售彩。</text>
					</view>
					<template v-if="articleDetail.pay || articleDetail.enablePay != 1 ||isPay">
						<CommentInput :popup.sync="inputPopup" :type="articleDetail.userType == 'user' ? 99 : 1"
							:commentType="1" :articleId="articleId"
							:expertId="articleDetail.expertInfo && articleDetail.expertInfo.expertId"
							@success="commentSuccess"></CommentInput>
					</template>
					<view class="post-foot-buy flex-r" v-else-if="!endPay ||!articleDetail.pay">
						<view class="buy-info flex-r"
							v-if="articleDetail.label == '1' && !articleDetail.payCardRecordId && !relationId">
							<text class="price"
								:class="{'delete': articleDetail.avgBeanCard}">{{articleDetail.payBeanValue}}</text>
							<text class="color-black">彩虹豆</text>
							<template v-if="articleDetail.avgBeanCard">
								<text class="color-gold">优享价：</text>
								<text class="color-gold vip-price">{{articleDetail.avgBeanCard}}</text>
								<text class="color-gold">彩虹豆</text>
							</template>
						</view>
						<view class="buy-info flex-r color-red" v-else-if="articleDetail.label == '2' && !relationId">
							<text class="price delete">{{articleDetail.payBeanValue}}</text>
							<text class="color-black">彩虹豆</text>
							<text>福利价：</text>
							<text class="vip-price">{{articleDetail.benefitPrice}}</text>
							<text>彩虹豆</text>
						</view>
						<view class="buy-info flex-r" v-else>
							<text class="price big"
								:class="{'delete': relationId || (articleDetail.label == '1' && articleDetail.payCardRecordId)}">{{articleDetail.payBeanValue}}</text>
							<text class="color-black">彩虹豆</text>
						</view>
						<view class="buy-btn">
							<button @tap="goBuy" class="btn active"
								v-if="(!articleDetail.Pay||articleDetail.finish==1)&&!endPay"
								:class="{'cardfree': articleDetail.label == '1' && articleDetail.payCardRecordId}"
								size="mini">
								{{relationId ? '补单解锁' : articleDetail.label == '1' && articleDetail.payCardRecordId ? '优享免费解锁' : '立即解锁'}}
							</button>
							<button class="btn"
								v-else-if="(!articleDetail.Pay&&articleDetail.finish==2)||!countDown &&endPay"
								:class="{'cardfree': articleDetail.label == '1' && articleDetail.payCardRecordId}"
								:disabled="true" size="mini">
								停售
							</button>
							<template v-if="!relationId&&(!articleDetail.Pay||articleDetail.finish==1)&&!endPay">
								<image class="state-icon" src="@/public/images/public/bzfh.png" mode="aspectFit"
									v-if="articleDetail.state == 1"></image>
								<image class="state-icon" src="@/public/images/public/bzbd.png" mode="aspectFit"
									v-if="articleDetail.state == 3"></image>
								<!-- <image class="numcard-icon" src="@/public/images/public/ckxyh.png" mode="aspectFit"
									v-if="expertNumCard && (articleDetail.label != '1' || !articleDetail.payCardRecordId) && articleDetail.state==2"
									@tap.stop="$goByName('expertnumcard', {eid: articleDetail.expertInfo.expertId, random: Date.now()})">
								</image> -->
							</template>
						</view>
					</view>
				</view>
				<view class="post-foot" v-else>
					<view class="post-foot-result flex-c" v-if="payResult != 0">
						<view class="pay-head flex-r">
							<text class="des"></text>
							<text>支付结果</text>
							<view class="des" @tap="reload(payResult)">
								<image src="@/public/images/public/qxan.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="pay-body flex-c">
							<view class="pay-body-result flex-c ac" v-if="payResult == 1">
								<image src="@/public/images/public/zfcg.png" mode="aspectFit"></image>
								<text class="title">{{recordType != 'pay' ? '解锁成功' : '支付成功'}}</text>
								<text class="reson">{{price && recordType == 'pay' ? '支付'+(price)+'彩虹豆' : ''}}</text>
							</view>
							<view class="pay-body-result flex-c ac" v-else>
								<image src="@/public/images/public/zfsb.png" mode="aspectFit"></image>
								<text class="title">{{recordType != 'pay' ? '解锁失败' : '支付失败'}}</text>
								<text class="reson">{{errorMsg}}</text>
							</view>
						</view>
						<view class="pay-result-btn">
							<button type="default" @tap="reload(payResult)" v-if="payResult == 1">查看料详情</button>
							<button type="default" @tap="goRecharge" v-if="payResult == 2">去充值</button>
							<button type="default" @tap="repeatBuy"
								v-if="payResult == 3">{{recordType != 'pay' ? '重新解锁' : '重新支付'}}</button>
						</view>
					</view>
					<!-- <view class="post-foot-select flex-c" v-else-if="isSelectService !== false">
						<view class="pay-head flex-r">
							<text class="des"></text>
							<text>选择服务</text>
							<view class="des" @tap="goBuy">
								<image src="@/public/images/public/qxan.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="pay-body flex-c">
							<view class="flex-c">
								<view class="pay-body-list flex-c jc card" @tap="isSelectService = 'card'"
									:class="{'active': isSelectService === 'card'}"
									v-if="articleDetail.label == '1' && expertCard">
									<image class="buy-icon" src="@/public/images/public/wdg.png" mode="aspectFit">
									</image>
									<image class="select-icon" v-show="isSelectService === 'card'"
										src="@/public/images/public/gx.png" mode="aspectFit"></image>
									<image class="select-icon" v-show="isSelectService !== 'card'"
										src="@/public/images/public/wgx.png" mode="aspectFit"></image>
									<text class="list-title">{{articleDetail.expertInfo.expertName}}的优享福利卡</text>
									<view class="list-info">
										<text>服务范围内专家</text>
										<text class="bold">优享方案免费看</text>
										<text>+专家对话</text>
										<text class="bold">有问必答</text>
										<text>+每周一次</text>
										<text class="bold">5分钟专家直播连线</text>
										<text>+连续包月享</text>
										<text class="bold">85折优惠</text>
									</view>
								</view>
								<template v-if="userNumCard">
									<view class="pay-body-list flex-c jc numcard" v-for="(card, index) in userNumCard"
										:key="index" @tap="isSelectService = index"
										:class="{'active': isSelectService === index}">
										<image class="select-icon" v-show="isSelectService === index"
											src="@/public/images/public/gx.png" mode="aspectFit"></image>
										<image class="select-icon" v-show="isSelectService !== index"
											src="@/public/images/public/wgx.png" mode="aspectFit"></image>
										<text class="list-title">{{card.title}}</text>
										<view class="list-info flex-r ac">
											<view class="left flex-r ac">
												<text class="bold">{{card.cardBean}}</text>
												<text>彩虹豆/次 x {{card.cardTime}}次</text>
											</view>
											<view class="right flex-r">
												<text>剩余</text>
												<text class="num">{{card.syNum}}</text>
												<text>次</text>
											</view>
										</view>
									</view>
								</template>
								<view class="pay-body-list flex-c jc" @tap="getSelectService"
									:class="{'active': isSelectService === -1}">
									<image class="select-icon" v-show="isSelectService !== -1"
										src="@/public/images/public/wgx.png" mode="aspectFit"></image>
									<image class="select-icon" v-show="isSelectService === -1"
										src="@/public/images/public/gx.png" mode="aspectFit"></image>
									<text class="list-title">原价解锁方案</text>
									<text class="color-grey">需支付：{{price}} 彩虹豆</text>
								</view>
							</view>
						</view>
						<view class="pay-btn">
							<button type="default" :class="{'no-active': isSelectService === true}" @tap="selectSubmit">
								{{isSelectService === 'card' ? '订购优享卡' : (typeof isSelectService === 'number' && isSelectService > -1 ? '次卡解锁' : '立即解锁')}}
							</button>
						</view>
					</view> -->
					<view class="post-foot-pay flex-c" v-else-if="!inputPassword">
						<view class="pay-head flex-r">
							<text class="des"></text>
							<text>确认支付</text>
							<view class="des" @tap="goBuy">
								<image src="@/public/images/public/qxan.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="pay-body">
							<view class="pd20 flex-r ac jsb thinborder">
								<view class="flex-r ac">
									<image class="pay-zffs" src="@/public/images/expert/zffs.png" mode="aspectFit">
									</image>
									<text class="pay-types">支付方式</text>
								</view>
								<view class="flex-r ac" @tap="goISPay">
									<text class="pay-type">{{payType==2?'支付宝支付':'彩虹豆支付'}}</text>
									<image class="pay-zffs-right" src="@/public/images/expert/yjt_h.png"
										mode="aspectFit"></image>
								</view>
							</view>
							<view class="pay-body-agreement flex-r ac " id="agreement" v-if="!articleDetail.pay"
								@tap="isAgree=true">
								<image v-show="!isAgree" src="@/public/images/user/cz_wxz.png" class="radio"></image>
								<image v-show="isAgree || articleDetail.pay" src="@/public/images/user/cz_xz.png"
									class="radio"></image>
								<text class="des color-grey">我已阅读并接受</text>
								<text class="color-blue" @tap.stop="$CHS.goAbout('service')">《彩虹体育服务条款》</text>
							</view>
							<view class="pdt20 flex-r ac jsb thinborder-top">
								<view class="">
									<text class="need-pay">需支付：</text>
									<text class="need-bean">{{this.price}}</text>彩虹豆
								</view>
								<view class="pay-btns">
									<button type="default" @tap="goPay">立即支付</button>
								</view>
							</view>
						</view>
					</view>
					<view class="post-foot-pay flex-c" v-else-if="isPayType">
						<view class="pay-head flex-r">
							<text class="des"></text>
							<text>请选择支付方式</text>
							<view class="des" @tap="goBuy">
								<image src="@/public/images/public/qxan.png" mode="aspectFit"></image>
							</view>
						</view>
						<view class="pay-body">
							<!-- <view class="pay-body-choose flex-r ac jsb thinborder" @tap="payType=1">
								<view class="flex-r ac">
									<image class="pay-body-img" src="@/public/images/expert/wxzf.png" mode="aspectFit">
									</image>
									<text class="pay-type">微信支付</text>
								</view>
								<image class="pay-body-zf"
									:src="payType==1?require('@/public/images/expert/yx.png'):require('@/public/images/expert/wx.png')"
									mode="aspectFit"></image>
							</view> -->
							<!-- <view class="pay-body-choose flex-r ac jsb thinborder">
								<view class="flex-r ac">
									<image class="pay-body-img" src="@/public/images/expert/wxzf.png" mode="aspectFit"></image>
									<text class="pay-type">微信支付2</text>
								</view>
								<image class="pay-body-zf" src="@/public/images/expert/wx.png" mode="aspectFit"></image>
							</view> -->
							<view class="pay-body-choose flex-r ac jsb thinborder" @tap="payType=2">
								<view class="flex-r ac">
									<image class="pay-body-img" src="@/public/images/expert/zfbzf.png" mode="aspectFit">
									</image>
									<text class="pay-type">支付宝支付</text>
								</view>
								<image class="pay-body-zf"
									:src="payType==2?require('@/public/images/expert/yx.png'):require('@/public/images/expert/wx.png')"
									mode="aspectFit"></image>
							</view>
							<view class="pay-body-choose flex-r ac jsb thinborder" @tap="payType=3">
								<view class="flex-r ac">
									<image class="pay-body-img" src="@/public/images/expert/chdzf.png" mode="aspectFit">
									</image>
									<view class="">
										<text class="pay-type">彩虹豆支付</text>
										<view class="pay-bean" @tap="$goByName('userrecharge')">
											<text>余额：</text>
											<text class="pay-bean-balance">{{user.chBean}}</text>
											<text>彩虹豆</text>
											<text class="pay-bean-recharge">充值</text>
										</view>
									</view>
								</view>
								<image class="pay-body-zf"
									:src="payType==3?require('@/public/images/expert/yx.png'):require('@/public/images/expert/wx.png')"
									mode="aspectFit"></image>
							</view>
							<view class="pay-btn">
								<button type="default" @tap="goBuys">确认</button>
							</view>
						</view>
					</view>
					<view class="post-foot-password" v-else-if="!setPassword">
						<view class="pay-head flex-r">
							<text class="des" @tap="goBuy">取消</text>
							<text>密码支付</text>
							<text class="des color-blue" @tap="Pay">确定</text>
						</view>
						<view class="pay-body flex-c">
							<view class="pay-body-des color-grey">
								<text>请输入您的6位支付密码</text>
							</view>
							<view class="pay-body-password flex-c">
								<PassWord :input_value="payPwd"></PassWord>
								<text class="color-blue" @tap="resetPayPwd">忘记密码</text>
							</view>
							<view class="keyboard">
								<KeyBoard @input="inputPW"></KeyBoard>
							</view>
						</view>
					</view>
					<view class="post-foot-password" v-else-if="setPwdStep == 1">
						<view class="pay-head flex-r">
							<text class="des" @tap="goBuy">取消</text>
							<text>设置支付密码</text>
							<text class="des color-blue" @tap="setPayPwd">下一步</text>
						</view>
						<view class="pay-body flex-c">
							<view class="pay-body-des flex-c color-grey">
								<text>请输入6位数字密码用于彩虹豆支付</text>
							</view>
							<view class="pay-body-password">
								<PassWord :input_value="payPwd"></PassWord>
							</view>
							<view class="keyboard">
								<KeyBoard @input="inputNewPW"></KeyBoard>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <AppDown v-if="downShow&&platform!='ios'"
				:style="'bottom:calc('+`${footHeight + textHeight + 46}rpx`+' + var(--safe-area-inset-bottom))'"
				:bottom="false" :show="true" @close="hideDown"></AppDown> -->
			<view class="fixed flex-r ac jsb" @tap="$goByName('feedback')">
				<image src="@/public/images/article/ts.png" mode=""></image>
				<text>投诉</text>
			</view>
			<ExpertReward v-if="showReward && articleDetail.expertInfo" :expertId="articleDetail.expertInfo.expertId"
				@close="showReward=false"></ExpertReward>
			<MatchRemind v-if="visible" :datetime="articleDetail.matchInfoList[select].matchTime" @close="visible=false"
				@submit="favMatch"></MatchRemind>
			<CommentPopup :show.sync="showCommentPopup" :type="articleDetail.userType == 'user' ? 99 : 1"
				:msgId="articleDetail.id" :expertId="articleDetail.expertInfo && articleDetail.expertInfo.expertId"
				:barId="barInfo && barInfo.barId" :refresh="refreshing">
			</CommentPopup>
			<ShowDialog v-if="showCouponDialog" @close="showCouponDialog = false"></ShowDialog>
		</template>
		<EmptyContent v-else top="250rpx" text="暂无料数据" img="qsy_zwxl" :showRefresh="articleDetail.error"
			@refresh="getArticleDetail(articleId)"></EmptyContent>
		<Poput v-if="showPopup" :show="showPopup" @getShow="getShow" :expertInfo="articleDetail.expertInfo"
			:userType="articleDetail.userType"></Poput>
	</view>
</template>

<script>
	import {
		goBack
	} from '../../utils/common/common'
	export default {
		data() {
			return {
				navBgColor: 'rgba(0,0,0,0)', //导航栏背景色
				isBlack: false, //导航栏文字颜色变黑
				articleId: null, //料ID
				articleDetail: { //料内容
					error: false
				},
				expertCard: null, //优享卡
				userNumCard: null, //次卡
				expertNumCard: null, //专家的次卡
				relationId: null, //补单关联料ID
				recordType: 'pay', //支付记录类型

				isFaving: null, //关注操作状态，防止重复提交

				scores: [], //转化后的预测数据
				imageList: [], //付费内容中的图片元素
				imageListFree: [], //免费内容中的图片元素
				isAgree: true, //同意服务
				countDown: null, //倒计时
				endPay: false, //是否停止支付
				endPayTime: null, //结束售卖时间
				webTime: null, //服务器时间戳
				timer: null, //倒计时计时器
				payPwd: null, //临时记录支付密码

				isPay: false, //是否处于支付状态
				isSelectService: false, //是否选择优享卡服务
				inputPassword: false, //是否处于输入密码状态
				setPassword: false, //是否处于设置密码状态
				setPwdStep: 0, //记录支付密码进度
				payResult: 0, //记录支付结果
				isSubmit: false, //是否已经提交，防止重复提交
				refreshing: false, //下拉刷新状态
				navBorder: false, //导航栏下边框

				textHeight: 0, //顶部评论区高度

				downShow: true, //是否显示下载引导
				errorMsg: '网络异常，请检查您的网络设置', //支付错误信息

				expertShare: null, //专家相关晒单
				showReward: false, //专家福利

				select: null, //当前收藏比赛
				visible: false, //显示比赛提醒设置

				barInfo: null, //球吧基础信息
				showCommentPopup: false, //评论弹窗
				inputPopup: false, //输入框弹窗状态

				showCouponDialog: false, //优惠券提示弹窗状态
				isHeight: 0, //登录弹窗显示隐藏
				scrolly: true,
				payType: 2, //支付方式,支付宝支付
				isPayType: false, //是否确认支付方式
				showPopup: false, //是否显示接收消息通知
				code: null,
			}
		},
		components: {
			WanFa: () => import('./components/ch-wanfa/ch-wanfa.vue'), //预测玩法组件
			PassWord: () => import('@/components/ch-password/ch-password.vue'), //自定义密码框组件
			KeyBoard: () => import('@/components/ch-keyboard/ch-keyboard.vue'), //自定义键盘组件
			CommentList: () => import('./components/ch-comment/ch-commentlist.vue'), //自定义评论列表
			CommentPopup: () => import('./components/ch-comment/ch-commentpopup.vue'), //自定义评论列表弹窗
			CommentInput: () => import('./components/ch-comment/ch-commentinput.vue'), //留言输入框
			ContentList: () => import("@/components/ch-article/ch-contentlist.vue"), //专家晒单
			ExpertReward: () => import("./components/ch-reward/ch-expertreward.vue"), //专家福利
			MatchRemind: () => import('@/components/ch-match/ch-matchremind.vue'), //比赛提醒
			ShowDialog: () => import('./components/ch-dialog/ch-showdialog.vue'), //优惠券提醒
			Poput: () => import('./components/ch-dialog/ch-poput.vue')
		},
		computed: {
			user() { //用户信息
				return this.$store.state.user
			},
			isFollow() { //关注的比赛ID
				return this.$store.state.matchFollow
			},
			couponinfo() {
				return this.$store.state.couponinfo
			},
			footHeight() {
				if (this.articleDetail.enablePay != 1 || this.articleDetail.pay || this.articleDetail.finish == 1) {
					return 96
				} else if (!this.endPay) {
					return 120
				} else {
					return 0
				}
			},
			scrollHeight() {
				return `height:calc(var(--safe-height) - ${this.footHeight + this.textHeight}rpx);`;
			},
			weekDay() { //星期转换
				return (day) => {
					return this.$CHS.weekStr[day - 1]
				}
			},
			price() {
				//实际价格
				if (this.articleDetail) {
					if (this.relationId || (this.articleDetail.label == '1' && this.articleDetail.payCardRecordId)) {
						return 0
					} else if (this.articleDetail.label == '2') {
						return this.articleDetail.benefitPrice
					} else {
						return this.articleDetail.payBeanValue
					}
				} else {
					return 0
				}
			},
			windowHeight() {
				let height = uni.getSystemInfoSync().windowHeight
				return `--window-height:${height}px;`;
			},
			canLeave() {
				return !this.showCommentPopup && !this.inputPopup
			},
			weixin() {
				return this.$store.state.weixin
			}
		},
		watch: {
			"articleDetail.freeContent": function(newValue, oldValue) { //免费内容，添加图片点击事件
				if (newValue) {
					this.imageListFree = this.getImgList(newValue) //提取富文本内容的图片元素
					this.$nextTick(() => {
						setTimeout(() => { //延迟添加图片点击监听
							this.addPreviewImage("freeContent", this.imageListFree)
						}, 500)
					})
				}
			},
			"articleDetail.content": function(newValue, oldValue) { //付费内容，添加图片点击事件
				if (newValue) {
					this.imageList = this.getImgList(newValue) //提取富文本内容的图片元素
					this.$nextTick(() => {
						setTimeout(() => { //延迟添加图片点击监听
							this.addPreviewImage("content", this.imageList)
						}, 500)
					})
				}
			},
			"articleDetail.freeImageUrl": function(newValue, oldValue) { //免费内容，添加图片点击事件
				if (newValue) {
					this.imageListFree=newValue.split(',') //提取富文本内容的图片元素
					this.$nextTick(() => {
						setTimeout(() => { //延迟添加图片点击监听
							this.addPreviewImage("freeContent", this.imageListFree)
						}, 500)
					})
				}
			},
			"articleDetail.imageUrl": function(newValue, oldValue) { //付费内容，添加图片点击事件
				if (newValue) {
					this.imageList=newValue.split(',') //提取富文本内容的图片元素
					this.$nextTick(() => {
						setTimeout(() => { //延迟添加图片点击监听
							this.addPreviewImage("content", this.imageList)
						}, 500)
					})
				}
			}
		},
		onLoad(options) {
			let {
				aid,
				rid,
				barId,
				barName,
				barLogo,
				type
			} = this.$Route.query
			this.usertype = type
			this.articleId = aid //获取料ID
			this.relationId = rid //关联料ID
			if (this.articleId) {
				if (type && barId) {
					this.barInfo = {
						barId,
						logo: barLogo,
						title: barName
					}
				}
				this.getArticleDetail(this.articleId) //查询料详情
				console.log(this.articleDetail)

			} else { //非法请求处理
				console.log('非法请求');
				this.$CHS.errorRequest('index', '数据请求错误，请返回重试')
			}
			//图片加载错误监听
			window.addEventListener("error", this.$CHS.imageLoadError, true);
			//优惠活动弹窗
			if (this.user.couponActivity) {
				this.showCouponTimer = setTimeout(() => {
					console.log('showCouponDialog');
					this.showCouponDialog = true
					this.showCouponTimer = null
				}, 3000)
			}
		},
		onShow() {
			//更新倒计时
			if (this.endPayTime && !this.endPay) {
				this.setCountDown(1)
			}
			//修复页面滚定位置异常问题
			// if (this.scrollTop > 10) {
			// 	this.navBorder = true
			// } else {
			// 	this.navBorder = false
			// }
			//更新导航栏背景颜色
			if (this.scrollTop) {
				this.setNavBgColor()
			}
			//同步用户最新状态
			if (this.isPay) {
				this.$store.dispatch('updateUserinfo');
			}
			if (this.couponinfo.couponsId) {
				this.isSelectService = false
				this.inputPassword = false
				this.payResult = 0
				this.isPay = true
			}
			this.scrolly = true
			// uni.removeStorageSync('aid')
			if (this.$Route.query.success === 1) {
				let formdata = uni.getStorageSync('zfbformdata')
				if (formdata) {
					let out_trade_no = JSON.parse(formdata).out_trade_no
					this.checkOrderStatus(out_trade_no);
				}
			} else {
				console.log('==========')
				this.checkHaveOrder()
			}
		},
		//弹窗未关闭时拦截跳转
		beforeRouteLeave(to, from, next) {
			console.log(from, 'from');
			//放行，可直接打开专家主页、用户主页
			if (this.canLeave || to.name == 'experthome' || to.name == 'memberhome') {
				next();
			} else {
				if (this.showCommentPopup) { //关闭评论列表
					this.showCommentPopup = false
				} else if (this.inputPopup) { //关闭评论框
					this.inputPopup = false
				}
				next(false);
			}
		},
		onHide() {
			//停止倒计时
			this.setCountDown(2)
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0 // 立即滚动到顶部
			})
			// this.$store.commit('USER_COUPON', {
			// 	coupinPrice: 0,
			// 	couponsId: null
			// })
		},
		onPageScroll(e) {
			console.log(e, this.$store.state.isLogin, this.articleDetail)
		},
		onUnload() {
			console.log('unload');
			//停止倒计时
			this.setCountDown(2)
			//清理播放记录
			if (this.videoPath) {
				uni.removeStorageSync(this.videoPath)
			}
			if (this.showCouponTimer) {
				clearTimeout(this.showCouponTimer)
				this.showCouponTimer = null
			}
			//移除错误监听
			window.removeEventListener("error", this.$CHS.imageLoadError, true)
		},

		methods: {
			//页面滑动监听
			scroll(e) {
				//记录滚动位置，设置导航栏下边框
				this.scrollTop = e.detail.scrollTop
				if (!this.timeout) {
					this.timeout = setTimeout(() => {
						this.timeout = null
						this.setNavBgColor()
						uni.createSelectorQuery().select('#tabCon').boundingClientRect(res => {
							if (res && res.top < 10) { //计算滚动距离，固定tab栏
								this.fixed = true
								this.navBorder = false
								this.navBgColor = 'rgba(255,255,255,1)'
								this.isBlack = true
							} else {
								this.fixed = false
							}
						}).exec()
					}, 50)
				}
				//免费视频方案登录
				if (!this.$store.state.isLogin && this.articleDetail.enablePay === 2 && e.detail.scrollTop > 0) {
					this.$nextTick(() => {
						this.scrolly = false
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0 // 立即滚动到顶部
						})
					})
					this.freeArticleLogin()
				}
			},
			//下拉刷新
			refresh() {
				//更新刷新状态，加载数据
				this.refreshing = true
				this.isPay = false
				this.payResult = 0
				this.getArticleDetail(this.articleId)
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//料详情
			getArticleDetail(articleId) {
				let url = '/api/user/article/details'
				let data = {
					articleId,
					forumId: this.barInfo && this.barInfo.barId
				}
				// if (this.usertype === 'user') {
				// 	url = '/api/user/article/queryById'
				// 	data = {
				// 		id: articleId,
				// 		forumId: this.barInfo && this.barInfo.barId
				// 	}
				// }
				console.log(url, articleId, 'url')
				this.$http.get({
					url,
					data
				}).then(data => {
					console.log(data, '=======详情');
					this.webTime = data.timestamp //记录服务器时间戳
					if (data.success && data.result && data.result.id) {

						this.articleDetail = data.result
						//this.articleDetail.error = true
						//更新列表阅读数量
						uni.$emit('readNum', {
							num: data.result.virtualReadNum
						})
						//处理IOS多余Html代码
						if (data.result.freeContent) {
							this.articleDetail.freeContent = this.$CHS.filterRichText(data.result.freeContent)
							// this.articleDetail.freeContent.replace(/<img.*?>/g, "")
						}
						if (data.result.content) {
							this.articleDetail.content = this.$CHS.filterRichText(data.result.content)
							// this.articleDetail.content.replace(/<img.*?>/g, "")
						}
						//结束售卖
						if (this.articleDetail.finish === 1 || this.articleDetail.enablePay !== 1 || this
							.articleDetail.pay === true || this.usertype === 'user') {
							this.endPay = true
						} else if (this.articleDetail.endPayTime) {
							let stringTime = this.articleDetail.endPayTime
							stringTime = stringTime.replace(/-/g, "/")
							this.endPayTime = new Date(stringTime).getTime()
							let now = Date.now()
							if (now >= this.endPayTime || this.webTime >= this.endPayTime) {
								this.endPay = true
							} else {
								this.endPay = false
								this.setCountDown(1)
							}
						}
						//转化预测数据
						if (this.articleDetail.matchInfoList && this.articleDetail.matchInfoList[0]) {
							this.articleDetail.matchInfoList.forEach((match, index) => {
								let finish = (this.articleDetail.enablePay != 1 || this.articleDetail
									.pay) ? 1 : this.articleDetail.finish
								let scores = this.$CHS.itemsToScores(match.items, finish)
								this.$set(this.scores, index, scores)
							})
							console.log(this.scores);
						}
						//读取专家信息
						//this.getExpertInfo()
						//可用优惠券
						// if(this.articleDetail){
						// 	this.getCoupon(this.articleDetail.expertInfo.expertId,this.articleDetail.payBeanValue)
						// }
						//查询晒单列表
						if (this.articleDetail.expertInfo) {
							this.getExpertShare()
						}
						if (this.$store.state.isLogin) {
							if (this.articleDetail.expertInfo) {
								//查询其他在售的料
								if (this.articleDetail.expertInfo.saleArticleNum) {
									this.getOtherArticle()
								}
								//查询专家的优享卡列表
								if (this.articleDetail.expertInfo.cardFlag == 1) {
									this.getExpertCard()
								}
								//查询持有的次卡列表
								if (!this.relationId && !this.endPay) {
									this.getExpertNumCard()
									this.getNumCard()
								}
							}
							//查询补单料
							if (this.articleDetail.result === 2 || this.articleDetail.result === 4) {
								this.getSupplyArticle()
							}
						}
						//不中返还
						// if (this.articleDetail.state == '1' && this.articleDetail.enablePay == 1 && this
						// 	.articleDetail.pay && this.articleDetail.backFlag == 1 && this.articleDetail.result ==
						// 	2) {
						// 	this.user.chBean += this.price - this.couponinfo.coupinPrice >= 0 ? this.price - this
						// 		.couponinfo.coupinPrice : 0
						// 	console.log(this.user, '用户信息---')
						// 	this.$store.commit('UPDATE_USERINFO', {
						// 		...this.user
						// 	})
						// 	this.$store.dispatch('updateUserinfo')
						// }
					} else {
						this.$ShowToast({
							text: data.message || '料详情加载失败',
							type: 2,
							time: 3
						})
						this.articleDetail.error = true
					}
				}).catch((err) => {
					console.log(err);
					this.articleDetail.error = true
				})
			},
			//读取专家信息
			getExpertInfo() {
				this.$http.get({
					url: '/api/user/article/exportInfo',
					noLoading: true,
					data: {
						expertId: this.articleDetail.expertInfo.expertId
					},
				}).then(data => {
					if (data.success) {
						this.expertInfo = data.result
					} else {
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//专家的优享卡
			getExpertCard() {
				this.$http.get({
					url: '/api/card/list',
					noLoading: true,
					data: {
						expertId: this.articleDetail.expertInfo.expertId
					}
				}).then((data) => {
					console.log(data);
					if (data.success && data.result && data.result[0]) {
						this.expertCard = data.result[0]
					}
				})
			},
			//专家的次卡
			getExpertNumCard() {
				this.$http.get({
					url: '/api/card/queryExpertNumCardRows',
					data: {
						expertId: this.articleDetail.expertInfo.expertId
					}
				}).then((data) => {
					console.log(data);
					if (data.success && data.result && data.result[0]) {
						this.expertNumCard = data.result
					} else {
						this.expertNumCard = null
					}
				})
			},
			//当前可以使用的次卡
			getNumCard() {
				this.$http.get({
					url: '/api/card/record/queryUseCardByBuyExpert',
					noLoading: true,
					data: {
						bean: this.price,
						expertId: this.articleDetail.expertInfo.expertId,
						userId: this.user.userId
					}
				}).then((data) => {
					console.log('次卡', data, this.articleDetail);
					if (data.success && data.result && data.result[0]) {
						this.userNumCard = data.result

					}
				})
			},
			//专家晒单
			getExpertShare() {
				this.$http.get({
					url: '/api/user/dynamic/list',
					noLoading: true,
					data: {
						type: 2,
						expertId: this.articleDetail.expertInfo.expertId,
						pageNo: 1,
						pageSize: 1
					},
				}).then(data => {
					console.log(data);
					if (data.success && data.result && data.result.total) {
						this.expertShare = data.result.records
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//其他料推荐
			getOtherArticle() {
				this.$http.get({
					url: '/api/user/article/exclude',
					noLoading: true,
					data: {
						expertId: this.articleDetail.expertInfo.expertId,
						excludeId: this.articleId
					},
				}).then(data => {
					if (data.success && data.result && data.result[0]) {
						this.articleDetail.articleList = data.result
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//补单料
			getSupplyArticle() {
				this.$http.get({
					url: '/api/article/supplement/user',
					noLoading: true,
					data: {
						articleId: this.articleId
					},
				}).then(data => {
					if (data.success && data.result && data.result[0]) {
						this.$set(this.articleDetail, 'supplyList', data.result);
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			// 提取富文本图片元素
			getImgList(newValue) {
				let imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
				let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
				let arr = newValue.match(imgReg); //筛选出所有的img
				let srcArr = [];
				if (arr) {
					arr.forEach(item => {
						let src = item.match(srcReg);
						srcArr.push(src[1]);
					})
				}
				return srcArr
			},
			//图片添加点击监听实现预览功能
			addPreviewImage(refId, imageList) {
				//获取dom
				let contentDom = this.$refs[refId]?.$el
				console.log(contentDom,'contentDom')
				if (contentDom) {
					contentDom.addEventListener('click', (e) => {
						console.log(e.target.currentSrc,'e.target.currentSrc')
						if (e.target.tagName.toUpperCase() == "IMG" && e.target.width > 50) {
							//图片预览
							uni.previewImage({
								current: e.target.currentSrc,
								urls: imageList,
								loop: true
							});
						}
					});
				}
			},
			getAdd(img,imgList){
				imgList=imgList.split(',')
				uni.previewImage({
					current: img,
					urls: imgList,
					loop: true
				});
			},
			//选择提醒时间
			seletRemindTime(index) {
				if (!this.$store.state.isLogin) {
					this.$CHS.goUserLogin()
					return
				}
				this.select = index
				this.visible = true
			},
			//关注比赛
			favMatch(remindTime) {
				if (!this.$store.state.isLogin) {
					this.$CHS.goUserLogin()
					return
				}
				let match = this.articleDetail.matchInfoList[this.select]
				if (match.matchId === this.isFaving) { //防止重复提交
					return
				} else {
					this.isFaving = match.matchId
					this.$CHS.favMatch(match.matchId, match.sportId, remindTime).finally(() => {
						this.isFaving = null
					})
				}
			},
			//关注专家
			favExpert({
				expertId,
				expertStatus
			}) {
				console.log(expertStatus, 'expertStatus')
				if (!this.$store.state.isLogin) {
					this.$CHS.goUserLogin()
					return
				}
				// if (expertStatus != 1) {
				// 	this.$ShowToast({
				// 		text: '专家状态异常，关注失败',
				// 		type: 2
				// 	})
				// 	return
				// }
				if (expertId === this.isFaving) { //防止重复提交
					return
				} else {
					this.isFaving = expertId
					this.$CHS.favExpert(expertId).then(res => {
						console.log(res);
						this.articleDetail.expertInfo.followStatus = 1
						this.$forceUpdate()
					}).catch(err => {
						console.log(err);
					}).finally(() => {
						this.isFaving = null
					})
				}
			},
			//打开聊天
			goChat({
				expertId,
				expertStatus,
				userIdentity
			}) {
				// if (expertStatus != 1) {
				// 	this.$ShowToast({
				// 		text: '专家状态异常，私信失败',
				// 		type: 2
				// 	})
				// 	return
				// }
				this.$CHS.goChat(expertId, userIdentity)
			},
			//视频播放
			videoPlay(path) {
				uni.showToast({
					title: '手机网页暂不支持播放视频，请下载APP观看',
					icon: 'none'
				})
			},
			//选择优惠券
			selectCoupon() {

				// uni.showModal({
				// 	title: '系统提示',
				// 	content: '手机网页暂不支持使用优惠券，请下载彩虹体育APP抢先体验',
				// 	cancelText: '取消',
				// 	confirmText: '确定',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			let random = this.$CHS.randomString(10) + Date.now()
				// 			this.$goByName('downapp', {
				// 				random
				// 			})
				// 		}
				// 	}
				// })
				// if (label == '2' || label == '1') {
				// 	return
				// } else {
				// 	this.$goByName("coupon", {
				// 		eid,
				// 		aid,
				// 		price
				// 	})
				// }

			},
			getCoupon(expertId, payBeanValue) {
				this.$http.get({
					url: "/api/coupon/canUse",
					data: {
						expertId,
						payBeanValue
					}
				}).then((data) => {

					console.log(data, '优惠券')
				})
			},
			//原价解锁
			getSelectService() {
				this.isSelectService = -1
				this.$store.commit('USER_COUPON', {
					coupinPrice: 0,
					couponsId: null
				})
			},
			//去购买
			goBuy() {
				if (!this.$store.state.isLogin) {
					this.$CHS.goUserLogin()
					return
				}
				if (!this.isPay && this.endPay) {
					uni.showToast({
						title: '当前方案售卖已截止',
						icon: 'none'
					})
					return
				}
				if (this.relationId) {
					this.unLockArticle('bdjs')
					return
				}
				if (this.articleDetail.label == '1') {
					if (this.articleDetail.payCardRecordId) {
						this.unLockArticle('zxjs')
						return
					} else if (this.expertCard) {
						this.isPay = !this.isPay
						this.isSelectService = 'card'
						return
					}
				}
				// if (this.userNumCard) {
				// 	this.isPay = !this.isPay
				// 	this.isSelectService = true
				// 	return
				// }
				this.isPay = !this.isPay
				this.inputPassword = false
				this.setPassword = false
				this.isPayType = false
				this.setPwdStep = 0
				this.payType = 2
				this.payPwd = null
				if (this.isPay) {
					//同步最新状态
					this.$store.dispatch('updateUserinfo');
				}
				if (this.couponinfo.couponsId) {
					console.log('====gubuy')
					this.$store.commit('USER_COUPON', {
						coupinPrice: 0,
						couponsId: null
					})
				}
			},
			//服务选择提交
			selectSubmit() {
				if (this.isSelectService === -1) {
					this.isSelectService = false
					this.inputPassword = false
					this.setPassword = false
					this.setPwdStep = 0
					this.payPwd = null
					this.isPayType = false
					this.payType = 1
					this.$store.dispatch('updateUserinfo');
				} else if (this.isSelectService === 'card') {
					this.$goByName('expertcards', {
						eid: this.articleDetail.expertInfo.expertId,
						random: Date.now()
					});
				} else if (typeof this.isSelectService == 'number' && this.userNumCard[this.isSelectService]) {
					this.unLockArticle('ckjs');
				} else {
					uni.showToast({
						title: '请选择服务',
						icon: 'none'
					});
				}
			},
			//确认支付方式
			goISPay() {
				if (!this.isAgree) {
					uni.showToast({
						title: '请阅读并接受服务条款',
						icon: 'none'
					})
					return
				}
				this.isPayType = true
				this.inputPassword = true

				console.log(this.isPayType, this.inputPassword, this.setPassword, this.setPwdStep)
			},
			goBuys() {
				if (this.payType == 3) {
					if (this.user.chBean < this.price) {
						uni.showModal({
							title: '支付提示',
							content: '您的彩虹豆余额已不足，请充值后再购买，是否立即充值？',
							success: (res) => {
								if (res.confirm) {
									this.goRecharge()
								}
							}
						})
						return
					}

					if (this.user.payPwd) {
						this.inputPassword = true
					} else {
						this.inputPassword = true
						this.setPassword = true
						this.setPwdStep = 1
						uni.showToast({
							title: '请设置支付密码',
							icon: 'none'
						})
					}
					this.isPayType = false
					this.inputPassword = true

					this.goPay()
				} else {
					this.inputPassword = true
					this.setPassword = true
					this.isPay = false
					this.getOrderModel()
				}
			},
			//去支付
			goPay() {
				if (!this.isAgree) {
					uni.showToast({
						title: '请阅读并接受服务条款',
						icon: 'none'
					})
					return
				}
				if (this.payType == 2) {
					this.inputPassword = true
					this.setPassword = true
					this.isPay = false
					this.getOrderModel()
				}
				if (this.payType == 3 && this.user.chBean < this.price) {
					uni.showModal({
						title: '支付提示',
						content: '您的彩虹豆余额已不足，请充值后再购买，是否立即充值？',
						success: (res) => {
							if (res.confirm) {
								this.goRecharge()
							}
						}
					})
					return
				}
				if (this.payType == 3) {
					if (this.user.payPwd) {
						this.inputPassword = true
					} else {
						this.inputPassword = true
						this.setPassword = true
						this.setPwdStep = 1
						uni.showToast({
							title: '请设置支付密码',
							icon: 'none'
						})
					}
				}
			},
			//提交支付
			async Pay() {
				if (this.payType == 3 && this.payPwd && this.payPwd.length == 6) {
					if (this.isSubmit) {
						return
					}
					this.isSubmit = true
					let webTime = await this.$CHS.getWebTime()
					if (this.endPayTime < webTime) {
						uni.showToast({
							title: '售卖已截止，不能购买',
							icon: 'none'
						})
						this.isSubmit = false
						return
					}
					this.recordType = 'pay'
					//支付
					if (this.payType == 3) {
						this.goPayBean()
					}


				} else {
					uni.showToast({
						title: '请输入6位支付密码',
						icon: 'none'
					})
				}
				if (this.payType == 1 || this.payType == 2) {
					this.inputPassword = true
					this.setPassword = true
					this.isPay = false
					this.getOrderModel()
				}
			},
			//彩虹豆支付
			goPayBean() {
				this.$http.post({
					url: '/api/userPayRecord/payArticle',
					data: {
						articleId: this.articleId,
						expertId: this.articleDetail.expertInfo.expertId,
						isCouponsUse: 0,
						originalAmount: this.price,
						payAmount: this.price,
						payChannel: 3,
						payPwd: this.payPwd,
						userId: this.user.userId,
						recordType: this.recordType,
					},
				}).then(data => {
					console.log(data, '支付结果');
					this.isSubmit = false
					if (data.success) {
						uni.showToast({
							title: data.message || '支付成功',
							icon: 'success'
						})
						this.payResult = 1
						this.drawData = data.data
						this.$store.dispatch('updateUserinfo')
					} else {
						uni.showToast({
							title: data.message || '支付失败',
							icon: 'none'
						})
						if (data.code == 10025) {
							this.payResult = 2
							this.errorMsg = '余额不足，快去充值吧～'
						} else {
							this.payResult = 3
							this.errorMsg = data.message || '支付失败，请重新支付'
						}
					}
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
					this.payResult = 3
					this.errorMsg = '网络异常，请检查您的网络设置'
					this.isSubmit = false
				})
			},
			//统一下单
			getOrderModel() {
				let platform = null
				if (this.payType == 1 && this.weixin) {
					platform = "WX_JSAPI"
				} else if (this.payType == 1 && !this.weixin) {
					platform = "WX_H5"
				} else if (this.payType == 2) {
					platform = "ALI_WAP"
				}
				const orderModel = {
					articleId: this.articleId,
					payChannel: platform,
					userId: this.user.userId,
					rechargePrice: this.price,
					bean: this.price,
					orderChannel: 'pay',
					sendBean: 0,
				}
				if (platform == "ALI_WAP") {
					uni.setStorageSync('aid', this.articleDetail.id)
					this.$Router.replace({
						name: 'zfbpay',
						params: {
							orderModel
						}
					})
				} else {
					uni.setStorageSync('aid', this.articleDetail.id)
					this.$Router.replace({
						name: 'weixpay',
						params: {
							orderModel
						}
					})
				}
			},

			//联系专家
			goChatBox(id) {
				let cid = 'C2C' + id
				this.$goByName('chatbox', {
					cid
				})
			},
			//解锁料
			async unLockArticle(recordType) {
				if (this.isSubmit) {
					return
				}
				this.isSubmit = true
				let webTime = await this.$CHS.getWebTime()
				if (this.endPayTime < webTime) {
					uni.showToast({
						title: '售卖已截止，不能解锁',
						icon: 'none'
					})
					this.isSubmit = false
					return
				}
				this.recordType = recordType
				let postData = {
					articleId: this.articleId,
					expertId: this.articleDetail.expertInfo.expertId,
					payChannel: 3,
					userId: this.user.userId,
					recordType
				}
				if (recordType == 'zxjs') {
					postData.cardId = this.articleDetail.payCardRecordId
				} else if (recordType == 'ckjs') {
					postData.articleBean = this.price
					postData.cardId = this.userNumCard[this.isSelectService].recordId
				} else if (recordType == 'bdjs') {
					postData.glArticleId = this.relationId
				}
				//解锁
				this.$http.post({
					url: '/api/userPayRecord/unlockArticle',
					data: postData
				}).then(data => {
					console.log(data, '解锁的料');
					this.isSubmit = false
					if (data.success) {
						uni.showToast({
							title: data.message || '解锁成功',
							icon: 'success'
						})
						this.isPay = 1
						this.payResult = 1
						this.$store.dispatch('updateUserinfo')
					} else {
						uni.showToast({
							title: data.message || '解锁失败',
							icon: 'none'
						})
						this.isPay = 1
						if (data.code == 10025) {
							this.payResult = 2
							this.errorMsg = '余额不足，快去充值吧～'
						} else {
							this.payResult = 3
							this.errorMsg = data.message || '解锁失败，请重新解锁'
						}
					}
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						title: '解锁失败',
						icon: 'none'
					})
					this.isPay = 1
					this.payResult = 3
					this.errorMsg = '网络异常，请检查您的网络设置'
					this.isSubmit = false
				})
			},
			//去充值
			goRecharge() {
				this.$CHS.goRecharge({
					type: 'article',
					id: this.articleId
				})
			},
			//重设支付密码
			resetPayPwd() {
				this.$Router.push({
					name: 'resetpassword'
				})
			},
			//输入支付密码回调
			inputPW(pw) {
				console.log(pw);
				this.payPwd = pw
			},
			//设置新密码回调
			inputNewPW(pw) {
				console.log(pw);
				if (this.setPwdStep == 1) {
					this.payPwd = pw
					if (this.payPwd && this.payPwd.length == 6) {
						uni.showToast({
							title: '请进行下一步',
							icon: 'none'
						})
					}
				}
			},
			//提交新支付密码
			setPayPwd() {
				if (this.setPwdStep == 1 && this.payPwd && this.payPwd.length == 6) {
					if (this.isSubmit) {
						return
					}
					this.isSubmit = true
					let userPwdModel = {
						newPayPwd: this.payPwd,
						userId: this.user.userId,
					}
					this.$http.post({
						url: '/api/appUser/setPayPwd',
						data: {
							...userPwdModel
						},
					}).then(data => {
						console.log(data);
						this.isSubmit = false
						if (data.success) {
							this.$store.commit('UPDATE_USERINFO', {
								payPwd: 1
							})
							this.$ShowToast({
								text: '支付密码设置成功'
							})

							this.payPwd = null
							this.setPwdStep = 0
							this.$nextTick(() => {
								this.setPassword = false
								this.inputPassword = true
								this.isPay = true
							})

							uni.showToast({
								title: '密码设置成功',
								icon: 'success'
							})
						} else {
							uni.showToast({
								title: data.message,
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
						this.isSubmit = false
						uni.showToast({
							title: '密码设置失败',
							icon: 'error'
						})
					})
				}
			},
			//支付成功后刷新页面
			reload(payResult) {
				//this.$Router.replace({name: 'articledetail', params: {aid: this.articleId, random: Date.now()}})
				if (payResult == 1 && this.drawData == 'draw') {
					setTimeout(() => {
						this.showReward = true
					}, 1000)
				}
				this.refresh()
			},
			//支付失败后重新购买
			repeatBuy() {
				this.isPay = false
				this.payPwd = null
				this.inputPassword = false
				this.setPassword = false
				this.payResult = 0
				this.goBuy()
			},
			//点赞
			supportSubmit(status) {
				if (!this.$store.state.isLogin) {
					this.$CHS.goUserLogin()
					return
				}
				if (!status) {
					this.$http.post({
						url: '/api/forum/like/add',
						data: {
							commonId: this.articleId,
							forumId: this.barInfo && this.barInfo.barId,
							status: 1,
							type: this.articleDetail.userType == 'expert' ? 1 : 4
						}
					}).then(data => {
						console.log(data);
						if (data.success) {
							this.$ShowToast({
								text: data.message || '点赞成功',
								type: 1
							})
							this.articleDetail.likeInfo.likeStatus = true
							this.articleDetail.likeInfo.likeCount += 1
							this.articleDetail.likeInfo.avatarList.unshift(this.user.avatar)
							this.articleDetail.likeInfo.avatarList = this.articleDetail.likeInfo.avatarList.slice(
								0, 5)
						} else {
							this.$ShowToast({
								text: data.message || '点赞失败，请稍后重试',
								type: 2
							})
						}
					})
				} else {
					uni.showToast({
						title: '您已经点赞过了',
						icon: 'none'
					})
				}
			},
			//评论输入行数变化
			lineChange(height) {
				console.log(height);
				this.textHeight = height
			},
			//评论发布成功
			commentSuccess() {
				this.refreshing = true
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//关闭下载回调
			hideDown(close) {
				if (close) {
					this.downShow = false
				}
			},
			//倒计时
			async setCountDown(type) {
				let _this = this
				if (type == 1) {
					console.log('倒计时');
					if (_this.timer || !_this.endPayTime || _this.endPay) {
						return
					}
					let time = _this.endPayTime
					let now = Date.now()
					if (_this.webTime - now > 3 * 1000 || now - _this.webTime > 30 * 1000) {
						console.log('获取网络时间');
						now = await _this.$CHS.getWebTime()
					}
					if (time > now) {
						time = parseInt((time - now) / 1000)
						let date = _this.formatSeconds(time)
						_this.countDown = date.split(':')
						_this.timer = setInterval(() => {
							time = time - 1
							if (time < 0) {
								clearInterval(_this.timer)
								_this.timer = null
								_this.endPay = true
							} else {
								date = _this.formatSeconds(time)
								_this.countDown = date.split(':')
								_this.$forceUpdate()
							}
						}, 1000)
					} else {
						_this.countDown = null
						_this.endPay = true
					}
				} else {
					if (_this.timer) {
						clearInterval(_this.timer)
						_this.timer = null
					}
				}
			},
			//时间格式转化2
			formatSeconds(value) {
				var theTime = parseInt(value); // 秒
				var theTime1 = 0; // 分
				var theTime2 = 0; // 小时
				if (theTime > 60) {
					theTime1 = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (theTime1 > 60) {
						theTime2 = parseInt(theTime1 / 60);
						theTime1 = parseInt(theTime1 % 60);
					}
				}
				var result = "" + theTime.toString().padStart(2, '0');
				if (theTime1 > 0) {
					result = "" + theTime1.toString().padStart(2, '0') + ":" + result;
				} else {
					result = "" + "00" + ":" + result;
				}
				if (theTime2 > 0) {
					result = "" + theTime2.toString().padStart(2, '0') + ":" + result;
				} else {
					result = "" + "00" + ":" + result;
				}
				return result;
			},
			//免费料登录提示
			freeArticleLogin() {
				uni.showModal({
					title: "登录后查看",
					content: "您还没有登录哦~\n登录后可查看完整版免费方案",
					confirmText: '确认',
					confirmColor: '#0055FF',
					success: (res) => {
						console.log(res)
						if (res.confirm) {
							this.$CHS.goUserLogin()
							this.showModal = false
							return
						}
						if (res.cancel) {
							this.$goByName('index')
							return
						}
					}
				})
			},
			//修改弹窗的显示隐藏
			getShow(value) {
				this.showPopup = value
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				if (scrollTop > 10) {
					this.navBorder = true
				} else {
					this.navBorder = false
				}
				switch (true) {
					case scrollTop < 10:
						this.navBgColor = 'rgba(255,255,255,0)'
						this.isBlack = false
						this.navBorder = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(255,255,255,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(255,255,255,0.2)'
						this.isBlack = false
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(255,255,255,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(255,255,255,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(255,255,255,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(255,255,255,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(255,255,255,1)'
						this.isBlack = true
						break;
				}
			},
			//检查是否已有订单
			checkHaveOrder() {
				let haveOrder = uni.getStorageSync('zfbhaveOrder')
				if (haveOrder) {
					//删除本地记录，防止重复提示
					uni.removeStorageSync('zfbhaveOrder')
					//formdata支付完成后通过返回URL参数获取，或者从本地存储获取
					let formdata = uni.getStorageSync('zfbformdata')
					if (formdata) {
						let out_trade_no = JSON.parse(formdata).out_trade_no
						uni.showModal({
							title: '支付提示',
							content: '查询到未支付订单，请确认是否已完成支付',
							confirmText: '已支付',
							cancelText: '未支付',
							success: (res) => {
								if (res.confirm) {
									//验证支付结果
									this.checkOrderStatus(out_trade_no)
								}
							},
							complete: () => {
								uni.removeStorageSync('zfbformdata')
							}
						})
					}
				}
			},
			//确认订单状态
			checkOrderStatus(orderNum) {
				this.$http.get({
					url: '/api/userRechargeRecord/verifyPayResult',
					data: {
						orderNum
					},
				}).then(data => {
					console.log(data, 'datadata')
					if (data.success && data.code == 200 && data.result) {
						console.log('验证通过后显示成功');
						this.$ShowToast({
							text: data.message || '恭喜您，购买成功！',
							type: 1
						})
						this.payResult = 1
						this.drawData = data.data
						this.$store.dispatch('updateUserinfo')
						// this.rechargeSuccess = true
					} else {
						uni.showModal({
							title: '支付提示',
							content: '您的支付未成功，如果您已完成支付，请联系公众号“彩虹有料”进行处理。',
							showCancel: false,
							success: () => {
								uni.setClipboardData({
									data: '彩虹有料'
								});
							}
						})
					}
					uni.removeStorageSync('zfbformdata');
					uni.removeStorageSync('zfbhaveOrder')
				}).catch((err) => {
					console.log(err);
				})
			},
			//复制微信号
			getWxNumbe(wxNum) {
				uni.setClipboardData({
					data: wxNum
				})
			},
			goBack(n) {
				let len = getCurrentPages().length
				if (len == 1) {
					uni.navigateBack({
						data: 1
					})
				} else {
					this.$goBack()
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;

		.scroll-Y {
			height: var(--safe-height);
		}
		.fixed{
			padding: 10rpx 19rpx;
			background: #FFCDD1;
			border-radius: 24rpx 0rpx 0rpx 24rpx;
			position: absolute;
			bottom: 388rpx;
			right: 0;
			z-index: 11;
			image{
				width: 33rpx;
				height: 32rpx;
				margin-right: 5rpx;
			}
			color: #FF2233;
			font-size: 24rpx;
		}
		.foot {
			&.full-screen {
				z-index: 997;
				display: flex;
				flex-direction: column-reverse;
				overflow-x: scroll;
				// height: var(--window-height);

				.post-foot {
					margin-top: 126rpx;
					position: unset;
				}
			}
		}
	}

	.head {
		background: linear-gradient(30deg, #001133 0%, #003399 100%);

		&.other {
			background: linear-gradient(30deg, #260000 0%, #4D0000 100%);
		}

		padding-bottom: 150rpx;
	}

	.body {
		padding: 10rpx 20rpx 20rpx;
		position: relative;
		top: -140rpx;

		&.isdown {
			padding-bottom: 220rpx;
		}
	}

	.card {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx 0 30rpx;
	}

	.cardpay {
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0 0;
		padding: 40rpx 0 30rpx;
	}

	.cards {
		background: #FFFFFF;
		// border-radius: 10rpx;
		padding: 40rpx 0 30rpx;
	}

	.post-des {
		position: relative;
		padding-top: 30rpx;
		background-position: 0 0;
		background-repeat: no-repeat;

		//福利图片
		// &.zs-icon{
		// 	background-image: url("~@/public/images/public/yxkmf.png");
		// 	background-size: 180rpx 60rpx;
		// }
		// &.fl-icon{
		// 	background-image: url("~@/public/images/public/flfa_bq.png");
		// 	background-size: 180rpx 60rpx;
		// }
		.post-des-title {
			margin: 0 20rpx;
			padding-bottom: 30rpx;
			z-index: 2;

			.title-name {
				font-size: 36rpx;
				font-weight: 500;
				line-height: 54rpx;
				word-break: break-all;
			}

			.spfa {
				width: 140rpx;
				height: 40rpx;
				vertical-align: text-bottom;
				margin-top: -4rpx;
				margin-right: 20rpx;
				line-height: 54rpx;
			}

			.text-info {
				margin-top: 20rpx;

				.views {
					flex: 2;
					text-align: right;
				}
			}
		}

		.post-des-head {
			margin: 20rpx 20rpx 0;

			//border-top: 1rpx solid #EDEDED;
			.author-image {
				position: relative;
				width: 96rpx;
				height: 96rpx;
				background-color: #FFFFFF;
				background: #030506;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
				background-size: 100%;

				.see-more {
					width: 200rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: -130rpx;
					left: 50rpx;
					box-sizing: border-box;
				}
			}

			.author-info {
				flex: 2;
				min-width: 175rpx;
				margin-left: 20rpx;
				margin-right: 30rpx;
				font-size: 28rpx;
				color: #FFFFFF;

				.info-top-name {
					font-weight: 500;

					image {
						margin-left: 7rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}

				.info-detail {
					margin-top: 18rpx;
					max-width: 400rpx;

					&.color-grey {
						color: #CCCCCC;
					}
				}
			}

			.author-fav {
				.favbtn {
					min-width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #0055FF;
					padding: 0;
					margin: 0;
					box-sizing: border-box;

					&.active-fav {
						background: #FFFFFF;
						border: none;
					}

					&.active-msg {
						color: #0055FF;
						background: #FFFFFF;
						border: 2rpx solid #0055FF;
						line-height: 56rpx;
					}

					&.nochat {
						border-color: #99BBFF;
						color: #99BBFF;
					}
				}

				.card-btn {
					width: 184rpx;
					height: 60rpx;
					background: linear-gradient(90deg, #FFD18C 0%, #FFEBCE 100%);
					border-radius: 30rpx;
					margin: 0 20rpx 0 0;
					padding: 0;
					border: none;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #591500;
					line-height: 60rpx;
				}
			}
		}

		.post-des-body {
			padding: 0 20rpx;

			.body-tag {
				// margin-top: 10rpx;

				text:first-child {
					margin-left: 0;
				}
			}

			.body-result {
				margin-top: 20rpx;
			}

			.author-result-detail {
				flex: 2;
				position: relative;

				&.max {
					max-width: 550rpx;
				}

				.detail-text {
					margin-bottom: 20rpx;
				}

				.detail-ball {
					overflow-x: auto;
					scrollbar-width: none;
					-webkit-overflow-scrolling: touch;
					max-width: 670rpx;
				}

				.detail-ball::-webkit-scrollbar {
					display: none;
				}
			}

			.author-result-detail::after {
				content: "";
				width: 5%;
				height: 100%;
				position: absolute;
				bottom: 0;
				right: 0;
				background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
			}

			.author-result-score {
				max-width: 135rpx;

				.result-des {
					margin-top: 20rpx;
				}
			}
		}

		.post-des-foot {
			margin-top: 20rpx;
			background: #F4F8FF;
			height: 48rpx;
			padding: 0 20rpx;

			.text-mini {
				color: #A3B2CC;
				line-height: 48rpx;
			}
		}

		.post-des-result {
			z-index: 1;
			position: absolute;
			top: 0;
			right: 0;

			image {
				width: 97rpx;
				height: 97rpx;
			}
		}
	}

	.post-event {
		margin-top: 20rpx;
		padding: 20rpx;

		.event-body {
			width: 100%;

			.event-body-des {
				.des-typebtn {
					margin-right: 20rpx;
					height: 32rpx;
					padding: 0 10rpx;
					border: 1rpx solid #4D88FF;
					border-radius: 4rpx;
					box-sizing: border-box;
				}

				.des-eventname {
					line-height: 22rpx;
					font-size: 22rpx;
					color: #999999;
				}

				.des-date {
					flex: 2;

					.fenge {
						margin: 0 8rpx;
					}
				}
			}

			.event-body-event {
				margin-top: 20rpx;
				align-items: flex-start;
				justify-content: center;

				.event-left,
				.event-right {
					width: 265rpx;
					align-items: flex-start;
				}

				.event-left {
					justify-content: flex-end;
				}

				.event-info {
					display: inline-flex;
					align-items: center;
					height: 36rpx;

					text {
						font-size: 20rpx;
						color: #999999;
						line-height: 28rpx;
					}
				}

				.event-info:first-child {
					margin-right: 16rpx;
				}

				.event-info:last-child {
					margin-left: 16rpx;
				}

				.event-team {
					align-items: flex-start;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 36rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					.team-name {
						display: inline-block;
						max-width: 150rpx;
					}

					&.left {
						text {
							text-align: right;
						}

						image {
							margin-left: 20rpx;
						}
					}

					&.right {
						text {
							text-align: left;
						}

						image {
							margin-right: 20rpx;
						}
					}
				}

				.event-score {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-family: Arial Black;
					color: $uni-primary;
					line-height: 36rpx;
					margin: 0 30rpx;
					white-space: nowrap;
				}
			}

			.event-body-status {
				text-align: center;
				margin-top: 20rpx;
			}
		}

		.event-wanfa {
			margin-top: 20rpx;
		}
	}

	.post-detail {
		margin-top: 20rpx;
		padding: 40rpx 20rpx;

		&.water-mark {
			background-image: url('~@/public/images/public/sy3.png');
			background-size: 237rpx 204rpx;
			background-position: 0 -10px;
			background-repeat: repeat;
		}

		.post-detail-head {
			align-items: flex-end;
		}

		.match {
			margin-top: 20rpx;

			.match-num {
				font-size: 28rpx;
				color: #999999;
			}

			.match-info {
				color: #333333FF;
				font-size: 30rpx;
				font-weight: bold;

				.z-k {
					color: #999999FF;
					font-size: 20rpx;
					margin: 0 5rpx;
				}

				.match-vs {
					color: #F23030FF;
					margin: 0 5rpx;
					font-weight: Medium;
				}
			}
		}

		.post-detail-body {
			margin-top: 20rpx;
			font-size: 15rpx;
			line-height: 52rpx;

			.article-image {
				flex-wrap: wrap;
				margin-top: 15rpx;

				image {
					width: 218rpx;
					height: 164rpx;
					border-radius: 8rpx;
					margin-right: 8rpx;
					margin-bottom: 8rpx;
				}

				image:nth-child(3n) {
					margin-right: 0;
				}

				&.more {
					justify-content: space-between;
					position: relative;

					.morenum {
						position: absolute;
						top: 0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 218rpx;
						height: 164rpx;
						font-size: 40rpx;
						color: #FFFFFF;
						background-color: rgba(0, 0, 0, 0.4);
						border-radius: 8rpx;
					}
				}

				&.big-image {
					.lazy-image {
						width: 670rpx;
						height: 376rpx;
						border-radius: 10rpx;
						margin-right: 0;
					}
				}

				&.full-width {
					.lazy-image {
						width: 226rpx;
						height: 170rpx;
						margin-right: 16rpx;
					}

					.lazy-image:nth-child(3) {
						margin-right: 0;
					}

					&.more {
						.morenum {
							width: 226rpx;
							height: 170rpx;
						}
					}

					&.big-image {
						.lazy-image {
							width: 710rpx;
							height: 400rpx;
							margin-right: 0;
						}
					}
				}

				&.video-box {
					position: relative;

					.thumb-img {
						background: #1F2633;
					}

					.playIcon {
						position: absolute;
						width: 100rpx;
						height: 100rpx;
					}

					.play-spt {
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						width: 80rpx;
						height: 32rpx;
					}
				}

			}

			.item-body-text {
				// width: 680rpx;
				// word-break: break-all;
				// display: -webkit-box;
				// word-wrap: break-word;
				&.lock {
					max-height: 200rpx;
					overflow: hidden;
					position: relative;
				}

				&.lock::after {
					content: "";
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
					z-index: 2;
				}
					
				// .text-con{
				// 	display: block;
				// 	word-break:break-all;
				// }
				
			}

			.articleDetail_content {
				margin-top: 8rpx;
			}

			.item-body-video {
				margin-top: 30rpx;
				border-radius: 10rpx;

				.play {
					position: relative;
					width: 670rpx;
					height: 376rpx;

					image {
						border-radius: 10rpx;
					}

					.btn {
						position: absolute;
						width: 120rpx;
						height: 120rpx;
					}
				}
			}
		}

		.post-detail-lock {
			margin-top: 20rpx;

			&.post-detail-lock-h {
				width: 670rpx;
				height: 376rpx;
			}

			.lock-time {
				margin-top: 30rpx;
				text-align: center;

				.time {
					color: #4C88FF;
					font-weight: bold;
					z-index: 3;

					.num {
						width: 120rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #F2F5FA;
						border-radius: 10rpx;
						font-size: 48rpx;
						font-family: Arial;
						z-index: 3;
					}

					.char {
						line-height: 80rpx;
						width: 44rpx;
						z-index: 3;
					}
				}
			}

			.lock-time-color {
				color: #ffffff;
				z-index: 11;
			}

			.lock-time-time {
				color: black;
			}

			&.foot-bg {
				position: relative;
				background-image: url('@/public/images/public/t1-ys.jpg');
				background-size: 670rpx 376rpx;
				background-repeat: no-repeat;
				background-position: top center;
				background-size: cover;
			}

			&.foot-bg::before {
				content: '';
				width: 670rpx;
				height: 376rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				background-color: rgba(0, 0, 0, 0.4);
			}

			&.basket-bg {
				position: relative;
				background-image: url('@/public/images/public/lqt-ys.jpg');
				background-size: 670rpx 376rpx;
				background-repeat: no-repeat;
				background-position: top center;
				background-size: cover;
			}

			&.basket-bg::before {
				content: '';
				width: 670rpx;
				height: 376rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

	}

	.lock-info {
		color: #B3B3B3;

		// &.mt39{
		// 	margin-top: 40rpx;
		// }
		.lock-info-img {
			width: 60rpx;
			height: 1rpx;

			&.left {
				margin-right: 5rpx;
			}

			&.right {
				margin-left: 5rpx;
			}
		}
	}

	.post-details {
		padding: 0 20rpx 40rpx;

		.post-detail-support {
			margin-top: 40rpx;
			padding-bottom: 42rpx;

			.support-icon {
				width: 240rpx;
			}

			.support-info {
				width: 100%;

				.support-user {
					position: relative;
					height: 64rpx;
					margin-right: 40rpx;

					.user-avatar {
						width: 64rpx;
						height: 64rpx;
						border: 4rpx solid #FFFFFF;
						box-sizing: border-box;
						position: absolute;
					}
				}
			}
		}

		.post-detail-notice {
			padding: 0 10rpx;
			padding-top: 30rpx;

			.author-image {
				position: relative;
				width: 96rpx;
				height: 96rpx;
				background-color: #FFFFFF;
				background: #030506;
				border-radius: 50%;
				background-size: 100%;
				margin-right:20rpx;
			}

			.notice-img {
				width: 530rpx;
				background-image: url('@/public/images/expert/dhk.png');
				background-size: 530rpx 120rpx;
				background-repeat: no-repeat;
				background-position: center center;

				.notice-expertInfo {
					display: block;
					padding: 25rpx 30rpx 25rpx 60rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #804000;
					line-height: 42rpx;
				}

				.notice-expertInfoName {
					color: #FF0000FF;
					font-weight: 500;
				}

				.notice-expertInfoNames {
					color: #FFE400FF;
					font-weight: 500;
				}
			}

			.notice-message {
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				margin-top: 40rpx;

				.message-notice {
					padding: 0 10rpx;
					color: #FFFFFF;
					min-width: 310rpx;
					height: 80rpx;
					background: #0055FF;
					border-radius: 10rpx;
					margin-right: 30rpx;

					&.action {
						background: #B2CCFF
					}
				}

				.contact-expertInfo {
					color: #0055FF;
					width: 310rpx;
					height: 80rpx;
					background: #FFFFFF;
					border: 2rpx solid #0055FF;
					border-radius: 10rpx;
				}
			}

		}
	}

	.post-other {
		margin-top: 40rpx;

		.post-other-head {
			align-items: center;
			justify-content: space-between;
			color: #333333;

			.head-left {
				line-height: 36rpx;
				font-size: 36rpx;
				font-weight: bold;
			}

			.head-right {
				height: 28rpx;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
			}
		}

		.post-other-hot {
			/deep/ .article-list-item {
				.title-info {
					margin-top: 30rpx;
				}

				.foot-info {
					margin: 20rpx 0 15rpx;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}

			&.addcontent {
				margin-top: 20rpx;
				padding: 30rpx 20rpx;
				background: #FFFFFF;
				border-radius: 10rpx;

				.addcontent-detail {
					font-size: 30rpx;
					font-weight: 500;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					display: -webkit-box;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.addcontent-info {
					margin-top: 30rpx;

					.date {
						color: #999999;
					}
				}
			}
		}

		.refund {
			margin-top: 20rpx;
			width: 660rpx;
			height: 198rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 0rpx 20rpx 0rpx 30rpx;

			text {
				margin-top: 30rpx;
				display: inline-block;

				&:nth-child(1) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					// line-height: 42rpx;
				}

				&:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.Refund_for_failure {
				.refund_left {
					float: left;
				}

				.refund_right {
					float: right;
				}

				.refund_right_text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #0055FF;
				}
			}
		}
	}

	.post-notice {
		margin-top: 30rpx;

		.title {
			margin: 0 0 15rpx;
			font-size: 28rpx;
			font-weight: 500;
		}

		.content {
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;

			&.color-grey {
				color: #B3B3B3;
			}
		}
	}

	.post-foot {
		max-width: $max-width;
		margin: $pc-margin;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		padding-bottom: var(--safe-area-inset-bottom);
		z-index: 997;

		.post-foot-toast {
			height: 48rpx;
			background: #E3EBFD;
		}

		.post-foot-buy {
			height: 120rpx;
			padding: 0 20rpx;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #F5F5F5;
			box-sizing: border-box;

			.buy-info {
				font-size: 26rpx;
				line-height: 1;
				align-items: flex-end;

				.price {
					font-size: 48rpx;
					font-weight: bold;
					line-height: 0.9;
					margin-right: 10rpx;
					color: #F23030;

					&.delete {
						font-size: 36rpx;
						text-decoration: line-through;
					}

					&.big {
						font-size: 48rpx;
					}
				}

				.color-black {
					margin-right: 15rpx;
				}

				.color-gold {
					color: #CC8314;
					line-height: 1;
				}

				.vip-price {
					font-weight: bold;
					margin-right: 10rpx;
					font-size: 36rpx;
					line-height: 0.9;
				}
			}

			.buy-btn {
				position: relative;

				.btn {
					width: 240rpx;
					height: 88rpx;
					padding: 0;
					margin: 0;
					background: #B2CCFF;
					border-radius: 44rpx;
					box-sizing: border-box;
					text-align: center;
					font-size: 32rpx;
					line-height: 88rpx;
					font-weight: 500;
					color: #FFFFFF;

					&.active {
						background: #0055FF;
					}

					&.cardfree {
						width: 280rpx;
					}
				}

				.state-icon {
					width: 120rpx;
					height: 32rpx;
					position: absolute;
					right: 0;
					top: -12rpx;
					z-index: 2;
				}

				.numcard-icon {
					width: 240rpx;
					height: 120rpx;
					position: absolute;
					right: 0;
					top: -120rpx;
					z-index: 1;
				}
			}
		}

		.post-foot-pay,
		.post-foot-password,
		.post-foot-result,
		.post-foot-select {
			.pay-head {
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #EDEDED;
				align-items: center;
				justify-content: space-between;
				font-size: 36rpx;
				font-weight: 500;

				.des {
					width: 100rpx;
					font-size: 32rpx;
				}

				.des:last-child {
					text-align: right;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.pay-body {
				align-items: center;

				.pay-body-choose {
					height: 112rpx;
					padding: 0 20rpx;

					.pay-body-img {
						width: 56rpx;
						height: 56rpx;
						margin-right: 30rpx;
					}

					.pay-body-zf {
						width: 32rpx;
						height: 32rpx;
					}

					.pay-type {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.pay-bean {
						font-size: 24rpx;
						color: #999999FF;
						margin-top: 15rpx;

						.pay-bean-balance {
							color: #F23030FF;
							margin-right: 10rpx;
						}

						.pay-bean-recharge {
							color: #4D88FFFF;
							margin-left: 31rpx;
						}
					}
				}

				.pd20 {
					padding: 32rpx 20rpx;

					.pay-types {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.pay-type {
						font-size: 26rpx;
						font-weight: 400;
						color: #999999;
					}

				}

				.pdt20 {
					padding: 32rpx 20rpx 0 20rpx;

					.pay-btns {
						button {
							height: 96rpx;
							line-height: 96rpx;
							border-radius: 48rpx;
							background: #0055FF;
							color: #FFFFFF;
							font-size: 32rpx;
							font-weight: 500;
							padding: 0 32rpx;
						}
					}

					.need-pay {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.need-bean {
						color: #F23030FF;
						font-size: 32rpx;
						font-weight: 500;
						margin-right: 20rpx;
					}
				}

				.pay-zffs {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}

				.pay-zffs-right {
					width: 24rpx;
					height: 24rpx;
				}

				.pay-body-des {
					text-align: center;
					margin-top: 40rpx;
					font-size: 28rpx;
					line-height: 28rpx;

					.btn {
						margin-left: 20rpx;
					}

					&.mt20 {
						margin-top: 30rpx;
					}
				}

				.pay-body-price {
					margin-top: 80rpx;
					align-items: flex-end;

					.price {
						margin-right: 15rpx;
						font-size: 72rpx;
						font-weight: 800;
						color: #F23030;
						line-height: 56rpx;
					}

					.chd {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 30rpx;
						line-height: 30rpx;
					}
				}

				.pay-body-del {
					margin-top: 20rpx;
					font-size: 24rpx;
					text-decoration: line-through;
					color: #B3B3B3;
					line-height: 24rpx;
				}

				.pay-body-coupon {
					width: 100%;
					margin-top: 110rpx;
					align-items: center;
					justify-content: space-between;

					.coupon-des {
						margin-left: 20rpx;
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: 500;
						flex: 2;
					}

					.coupon-info {
						font-size: 26rpx;
						line-height: 26rpx;
						color: #999999;
					}

					.coupon-icon {
						margin: 0 20rpx 0 10rpx;
						line-height: 28rpx;
					}
				}

				.pay-body-agreement {
					align-self: flex-start;
					margin-top: 40rpx;
					padding: 20rpx 20rpx 20rpx;
					font-size: 24rpx;

					.radio {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}

				.pay-body-result {
					margin: 0 20rpx;

					image {
						margin-top: 60rpx;
						width: 320rpx;
						height: 200rpx;
					}

					.title {
						margin-top: 30rpx;
						font-size: 36rpx;
						font-weight: 500;
					}

					.reson {
						margin-top: 20rpx;
						margin-bottom: 55rpx;
						font-size: 26rpx;
						color: #999999;
					}
				}
			}

			.pay-btn,
			.pay-result-btn {
				margin: 20rpx 20rpx 60rpx;

				button {
					height: 96rpx;
					line-height: 96rpx;
					border-radius: 48rpx;
					background: #0055FF;
					color: #FFFFFF;
					font-size: 32rpx;
					font-weight: 500;
					padding: 0;
					margin: 0;
				}
			}

			.pay-result-btn {
				margin: 20rpx 95rpx 60rpx;
			}
		}

		.post-foot-select {
			.pay-body {
				height: 560rpx;
				overflow-x: scroll;
			}

			.pay-body-list {
				position: relative;
				margin: 20rpx;
				padding: 0 20rpx;
				width: 710rpx;
				height: 160rpx;
				border: 1px solid #CCCCCC;
				border-radius: 10rpx;
				box-sizing: border-box;
				background-position: center center;
				background-size: 100%;
				background-repeat: no-repeat;

				.buy-icon {
					width: 120rpx;
					height: 36rpx;
					position: absolute;
					top: 0px;
					left: 0px;
				}

				.select-icon {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: -1px;
					right: -1rpx;
				}

				.list-title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.color-grey {
					margin-top: 20rpx;
					font-size: 20rpx;
					color: #666666;
				}

				.list-info {
					margin-top: 20rpx;
					font-size: 20rpx;
				}

				&.card {
					height: 184rpx;
					margin-bottom: 0;
					background-image: url("~@/public/images/public/yxflk_bg.png");

					.list-title {
						color: #591500;
					}

					.list-info {
						color: #804533;
						text-align: justify;

						.bold {
							font-weight: bold;
							color: #591500;
						}
					}
				}

				&.numcard {
					margin-bottom: 0;
					background-image: url("~@/public/images/public/kyck_bg.png");

					.list-title {
						color: #0A0099;
					}

					.list-info {
						color: #0A0099;
						justify-content: space-between;

						.right {
							align-items: flex-end;
						}

						.bold {
							font-size: 24rpx;
							font-weight: bold;
							color: #0A0099;
							margin-right: 5rpx;
						}

						.num {
							font-size: 36rpx;
							font-weight: bold;
							margin: 0 5rpx;
							line-height: 0.8;
						}
					}
				}

				&.active {
					border: 1rpx solid #0055FF;
				}
			}

			.pay-btn {
				margin: 0;
				padding: 12rpx 30rpx;
				border-top: 1rpx solid #EDEDED;

				.no-active {
					background-color: #B2CCFF;
				}
			}
		}

		.post-foot-password {
			.pay-body-password {
				width: 100%;
				margin: 30rpx 0 0;

				.color-blue {
					margin: 30rpx 60rpx 0 0;
					font-size: 28rpx;
					line-height: 28rpx;
					text-align: right;
				}
			}

			.keyboard {
				margin-top: 40rpx;
				width: 100%;
			}
		}
	}
</style>